Comment puis-je créer des motifs hexagonaux répétitifs en utilisant uniquement CSS3 ?

Générer des motifs hexagonaux répétitifs avec CSS3

C'est une question remarquable qui met en évidence les capacités des transformations CSS3. La solution consiste à utiliser un seul élément div, avec des div enfants supplémentaires formant les ailes gauche et droite de l'hexagone. L'image d'arrière-plan est héritée, tandis que les pseudo-éléments font pivoter l'image pour créer l'illusion d'hexagones complets.

Voici un aperçu de la technique :

• Définissez la structure hexagonale initiale en utilisant divs :
  `<div><div><span>Hex 1</span><div></div><div></div></div>
  <div><span>Hex 2</span><div></div><div></div></div>
  ...
  </div>`
• Utiliser blocs en ligne et dimensions définies ; ajustez les marges en fonction de l'espacement souhaité.
• L'hexagone principal :
  `.hexrow > div {
  width: 100px;
  height: 173.2px;
  ...}
  `

• Faire pivoter les "ailes":
  `.hexrow &gt ; div> div:premier-de-type {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow > div> div:dernier-de-type {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• Positionnez les pseudo-éléments pour créer des hexagones complets :
  `.hexrow > div> div:premier-de-type:avant {
  -ms-transform:rotate(-60deg) traduire(-150px, 0);
  -webkit-transform:rotate(-60deg) traduire(-150px, 0 );
  ...}

  `.hexrow > div> div:last-of-type:before {
  -ms-transform:rotate(60deg) traduire(100px, 86.6px);
  -webkit-transform:rotate(60deg) traduire(100px, 86.6px);
  ...`

• Ajouter du texte à l'étendue dans le hexagone.

Cette technique permet un placement précis du texte ou des images dans les hexagones en ciblant des éléments spécifiques dans le conteneur « hexrow ».

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!