Comment puis-je créer un hexagone avec à la fois un remplissage et un contour de différentes couleurs en utilisant CSS ?

Forme hexagonale avec bordure et remplissage

Le code suivant crée une forme hexagonale avec une couleur de fond unie et une bordure transparente :

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

Pour obtenir un hexagone avec à la fois un remplissage et un contour de couleurs différentes, une approche différente est nécessaire. Voici une méthode alternative utilisant des hexagones en couches :

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

<code class="css">.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    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 {
    background-color:blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    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 {
    background-color:red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}</code>

Cette méthode crée trois couches d'hexagones de tailles décroissantes et de couleurs différentes, donnant l'apparence d'un hexagone rempli avec un contour.

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!