Comment implémenter des hexagones en CSS

Comment implémenter des hexagones en CSS : 1. Combinez 3 p ensemble, dont 2 triangles isocèles et un rectangle 2. Obtenez un hexagone régulier en faisant pivoter 3 rectangles sous des angles différents.

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur Dell G3.

Comment implémenter des hexagones en CSS ?

J'écrivais récemment une mise en page en nid d'abeille, j'ai donc étudié le principe d'implémentation des hexagones
Deux façons d'implémenter des hexagones :
Méthode 1 : Un rectangle + deux triangles
Nous devons d'abord comprendre la bordure

Chaque bordure mesure 45 degrés d'écart. Nous pouvons utiliser cela pour créer un triangle

<p class="triangle"></p>/*css片段*/.triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

Le code ci-dessus peut créer un triangle isocèle avec un angle au sommet de 120 degrés

La façon dont nous créons un hexagone est de combiner 3 p ensemble, le haut et le bas sont 120. -des triangles isocèles de degrés, et le milieu est un rectangle (note : border-top/border-bottom détermine la hauteur du triangle)
Réalisons l'hexagone

<p class="top-triangle"></p>
<p class="center"></p>
<p class="bottom-triangle"></p>
/*css片段*/
.top-triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}
.center{
    width: 172px;
    height: 100px;
    background: red;
}
.bottom-triangle{
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

A partir du code ci-dessus, on peut obtenir une déformation hexagonale régulière
Méthode 2 : Faites pivoter trois rectangles sous des angles différents pour obtenir un hexagone régulier
Points clés : overflow : caché ;
L'utilisation de transform: rotate()

<p class="six">
    <p class="child">
        <p class="child_child"></p>
    </p></p>/*css片段*/.six,.child,.child_child{
    width: 100px;
    height: 150px;
    overflow: hidden;
}.six{    -webkit-transform: rotate(120deg);    -o-transform: rotate(120deg);    -ms-transform: rotate(120deg);    -moz-transform: rotate(120deg);
    transform: rotate(120deg);
}.child{    -webkit-transform: rotate(-60deg);    -o-transform: rotate(-60deg);    -ms-transform: rotate(-60deg);    -moz-transform: rotate(-60deg);
    transform: rotate(-60deg);
}.child_child{
    background: red;    -webkit-transform: rotate(-60deg);    -o-transform: rotate(-60deg);    -ms-transform: rotate(-60deg);    -moz-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

peut ajouter le p le plus intérieur. Pour les arrière-plans ou les images, n'ajoutez pas de couleur à les deux p à l'extérieur. Cependant, il n'y a aucun moyen d'ajouter du texte à l'hexagone créé de cette manière. Exécutez le code ci-dessus pour obtenir l'image suivante :

【Apprentissage recommandé : "tutoriel vidéo 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!