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!