Motif hexagonal avec CSS

Question

J'ai trouvé une excellente réponse sur stackoverflow sur comment créer un motif hexagonal en utilisant CSS.

Générer un motif hexagonal répétitif avec CSS3

C'est presque parfait, sauf que j'aimerais retourner les hexagones dans l'autre sens (c'est-à-dire avec le point en haut). J'ai réussi à le faire assez facilement en échangeant la largeur/hauteur de la div hex principale : (hexrow > div)... cependant j'ai du mal à réaligner l'image de fond sur les autres divs de support. J'essaie de trouver la solution depuis un moment maintenant sans grand succès.

Est-ce que quelqu'un pourrait éventuellement poster un jsFiddle qui montre comment faire ?

Voici où j'en suis actuellement : Ce que j'ai essayé

..et je crois que c'est là que je dois apporter des modifications :

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* largeur du principal + dimensionnement de la marge */
    height: 100%;
    background-image: inherit;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 120% auto;
    bottom: 0;
    left: 0;
    z-index: 1;

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari et Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);

    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

Toute aide serait grandement appréciée.

Answer 1

Utilisez :nth-of-type(odd) et :nth-of-type(even) et définissez des marges différentes pour les hexagones impairs/pairs sur la même ligne.

---

Ou vous pourriez le faire de manière beaucoup plus simple, avec moins de balisage - consultez ma réponse à cette question et cette démo que je viens de réaliser. L'idée est d'appliquer une série de transformations sur l'élément (qui a overflow: hidden) afin d'obtenir un losange avec un angle aigu de 60 degrés et ensuite d'annuler toutes ces transformations dans l'ordre inverse pour un pseudo-élément ou un élément enfant si vous le souhaitez (ayant la même hauteur que l'élément lui-même, mais seulement .866 de sa largeur, car .866 est le ratio de la distance entre deux côtés parallèles d'un hexagone et de sa grande diagonale) sur lequel vous appliquez en réalité l'background-image. Donc, il n'y a aucune chance de décalage, car l'image de fond n'est appliquée que sur un seul élément.

Structure de base du HTML:

CSS pertinent :

.row { margin: -8% 0%; text-align: center; }
.row:first-child { margin-top: 2.25%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 -1.5%;
    padding: 16%;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before {
    display: block;
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    right: 6.7%; bottom: 0; left: 6.7%; top: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg); /* 1.155 = 2/sqrt(3) */
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.row:first-child .hexagon:first-child:before {
    background-image: url(img.jpg); 
} 
/* et ainsi de suite, ajoutez des images de fond pour tous les hexagones */

Answer 2

J'ai utilisé des bordures.

Codepen.io

Et

#hex {
  display: inline-block;
  position: relative;
  width: 190px;
  height: 220px;
  background: no-repeat url("http://placekitten.com/200/300") 50% 50%;
}

div:before {

  content: " "; 
  display: block; 
  border-top: 0px solid transparent;
  border-bottom: 55px solid transparent;
  order-left: 95px solid white;
  border-right: 95px solid white;
}

div:after {

  content: " "; 
  display: block; 
  border-left: 95px solid white;
  border-top: 55px solid transparent;
  border-right: 95px solid white;
  margin-top:110px
}