Comment créer une forme hexagonale avec une bordure en utilisant CSS ?

Forme hexagonale avec bordure et contour

Créer une forme hexagonale à l'aide de pseudo-éléments CSS est une technique bien établie. Cependant, ajouter directement une bordure d’une couleur différente peut s’avérer difficile. Cet article explore une approche alternative pour obtenir l'effet souhaité.

En superposant plusieurs hexagones de différentes tailles et couleurs, il est possible de créer l'illusion d'un hexagone bordé tout en conservant le remplissage de couleur souhaité.

Exemple de mise en œuvre

HTML :

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

CSS :

.hex {
    ...  /* Hexagon shape and basic styles */
}

.hex inner {
    background-color: blue;
    ...  /* Transform and scaling */
}

.hex inner2 {
    background-color: red;
    ...  /* Transform and scaling */
}

Principe de fonctionnement :

L'élément .hex le plus à l'extérieur définit la forme et la couleur de l'hexagone de base. À l'intérieur, deux éléments .hex imbriqués sont ajoutés, chacun avec une couleur d'arrière-plan différente. La mise à l'échelle proportionnelle de ces éléments internes à l'aide de transform: scale() les réduit tout en conservant la forme hexagonale. Le résultat est une superposition d'hexagones de couleurs différentes, créant l'apparence d'un hexagone bordé.

Exemple en direct :

[Exemple d'hexagone](https://www. example.com/hexagon-example/)

Alternatives :

Si les images ne sont pas une option, d'autres techniques alternatives incluent SVG, Canvas ou l'utilisation d'une propriété de masque CSS .

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!