Comment créer un hexagone avec bordure et remplissage à l'aide de superpositions CSS ?

Création d'un hexagone avec bordure et remplissage

Les hexagones sont généralement créés à l'aide de bordures CSS via des pseudo-éléments. Bien qu'il ne soit pas directement possible de remplir un hexagone avec une couleur et de le délimiter avec une autre, une approche alternative consiste à superposer plusieurs hexagones les uns dans les autres.

Méthode de superposition

En superposant des hexagones, vous pouvez obtenir l'effet souhaité sans vous fier aux images. L'exemple suivant illustre cette méthode :

HTML :

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

CSS :

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    content: "";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}

.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}

.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

.hex.inner {
    /* Style inner hexagon */
    background-color: blue;
    transform: scale(.8, .8);
    z-index: 1;
}

.hex.inner:before {
    border-bottom: 60px solid blue;
}

.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

Ce code crée trois hexagones superposés, chacun avec des couleurs et un z-index différents. valeurs. La propriété transform: scale() est utilisée pour diminuer proportionnellement les dimensions des éléments internes, créant ainsi un effet superposé.

Exemple en direct

Vous pouvez voir un exemple en direct de cette technique ici : [Exemple de bordure et de remplissage hexagonal](https://codepen.io/username/pen/wveBJp)

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!