Comment créer un hexagone rempli avec une bordure à l'aide d'éléments imbriqués ?

Créer une forme hexagonale avec une bordure/un contour

Les formes hexagonales sont généralement créées à l'aide de pseudo-éléments en définissant des bordures, ce qui rend difficile la création de formes hexagonales. obtenez à la fois une couleur de remplissage et un contour. Une solution de contournement consiste à utiliser des hexagones imbriqués pour simuler l'effet souhaité.

Exemple en direct

[Lien de démonstration](insérer le lien ici)

HTML

<code class="html"><div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div></code>

CSS

1. Définir la forme et la taille de l'hexagone

<code class="css">.hex {
    /* Set width, height, fill color, and position */
}

.hex:before, .hex:after {
    /* Create triangular borders for the hexagon */
}</code>

2. Échelle et couleur des hexagones intérieurs

<code class="css">.hex.inner {
    /* Scale the inner hexagon and set a new color */
}

.hex.inner:before, .hex.inner:after {
    /* Adjust triangle borders within the scaled hexagon */
}</code>

3. Imbriquer un deuxième hexagone

<code class="css">.hex.inner2 {
    /* Scale and color the second nested hexagon */
}

.hex.inner2:before, .hex.inner2:after {
    /* Set triangle borders within the second scaled hexagon */
}</code>

Cette approche en couches vous permet de créer l'illusion d'un hexagone rempli avec un contour, même si l'hexagone réel est formé par les bordures des triangles imbriqués.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!