Cuisine et Web

le modéle de boite en flex donne une hauteur de référence aux enfants sans qu'il soit nécessaire de la déclaré dans la feuille de styles pour s'en servir. et c'est plutôt une bonne chose si l'on est dans un cas où cette hauteur varie selon le contenu ou la largeur de l'écran.

Habituellement incompatible avec les régles d'héritage, un enfant (ici un pseudo pour notre exemple) , d'une boite en flex (ou grid) peut donc recevoir un height:100%; pour s'afficher sur toute la hauteur de son parent lui même enfant d'une boite flex.

En faisant flotter cet élement (un pseudo en height:100%) , shape-outside peut-être utiliser sur toute la hateur de ce conteneur.

Voici ce que nous allons faire:

La structure HTML est construite sur un conteneur en flex avec un unique enfant où nous plaçons un pseudo flottant. et du contenu en ligne, nos boite en lignes en forme d'héxagone sont découpées avec clip-path.

shape-outside, appliqué au pseudo flottant, se chargera du décallage des lignes impaires en s'appuyant sur repeating-X-gradient()ou un fichierde type image , ou ici un SVG ou se trouve la forme opaque en background et qui se repete verticalement auquel d'autre formes complexes pourront être ajouter pour compléter ce gradient repetitif.

La version avec un gradient qui se répete

Cette version est amplement suffisante.

display:flex;
  flex-grow:1;
  margin:auto;
  padding:10px 0;
  counter-reset:hexs;
}
[data-flex] .container:before {
  content:'';
  float:left;
  height:100%;
  padding-bottom:10px;
  width:27px;
  shape-outside: repeating-linear-gradient(to bottom, transparent 0 24px, yellow 24px 26px, transparent 26px 86px);
  /* pour visualisé le gradient */
  background:repeating-linear-gradient(to bottom, transparent 0 24px, yellow 24px 26px, transparent 26px 86px);

}
.hex {
  background-color : #343434; 
  width     : 50px;
  height    : 57.5px;
  clip-path : polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
  margin :-6px 0px -7px;
  display:inline-flex;
  vertical-align:top;
  align-items:center;
  justify-content:center;
  counter-increment:hexs;
}
.hex:before {
  content:counter(hexs);
  color:white; 
}
.hex:hover {
  background-color : tomato;
}

La version avec un SVG

Cette version pour vous démontrer qu'elle fonctionne, l'usage d'un SVG aura tout son interêt lorsque plusieurs formes complexe seront a appliquées conjointement, comme un decalage en hexagone sur 5 lignes toutes les quarantes lignes par exemple ou suivre un profil (une tour eiffel, un bibendum, une suite de forme géometriques , etc)

[data-flex] {
  display:flex;
}
[data-flex] .container:before {
  content:'';
  float:left;
  height:100%;
  width:50px;
  shape-outside: url(/*svg en data uri */);
  
}
.hex {
  background-color : #343434; 
  width     : 50px;
  height    : 57.5px;
  clip-path : polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
  margin :-6px 0px -7px;
  display:inline-block;
  vertical-align:top;
}

L'inventaire de nos besoins

Notre structure de base théorique.

<div data-flex>
  <div class="container">
   <div class="hex"></div>
   <div class="hex"></div>
   <!-- etc. -->
  </div>
</div>

Mise en forme des héxagone

On applique une taille de façon à contenir un héxagone, puis un fond de couleur. Pour le moment nous avons un rectangle.

Pour nous aider à créer notre forme, voici un outil en ligne clippy choissisez l'hexagone et recopier la propriété clip-path et sa valeur qui se trouvent sous l'image. Facile!

Premier réglages

Ajouter autant d'enfants nécessaire à créer 2 lignes d'héxagones.

En fonction de la taille choisie, décallez le premier héxagone de la moitié de sa largeur: .hex:first-child{margin-left: XXpx;}.pour créer un décalage d'une ligne à l'autre.

Les deux lignes ne simbriquent pas, une marge vertical négative va permettre de superposer ces lignes et grace au décalage des héxagones, remplir les blancs sans qu'ils se chevauchent.

A ce stade, si il n'y a jamais plus de deux lignes, ce premier réglage est suffisant et on peut passer à autre chose.

répetition du décalage.

Une marge sur le premier élement et un pseudo flottant retaillé shape-outside à hauteur de la 3eme ligne peuvent fonctionné pour un maximum de 4 lignes.

See the Pen tut hexagone by gc-nomade (@gc-nomade) on CodePen.

L'outil clippy vous permet de créer cette forme et de la visualiser en appliquant un fond de couleur.

.conteneur:before {content:'';
  float:left;
  height:100%;
  width:50px;
  background:tomato;
  clip-path:polygon(
    0% 0%, 
    0% 100px, 
    27px 100px, 
    27px 125px, 
    0 125px, 
    0 100%);

La valeur de clip-path peut maintenant être appliquée à shape-outside et ainsi créer un décalage au niveau voulu, exactement là ou la couleur de fond est visible (le petit rectangle couleur tomate).

Répetition sur plus de quatre lignes.

Il est tout à fait possible de continuer à ajouter des points de coordonées a shape-outside:polygon() et crèer de nouvelles zones à intervalles réguliers.

Il sera cependant plus simple de se servir d'une image répetitive. C'est là qu'entre en jeux notre SVG. En utilisant un SVG vide d'une largeur au moins égale au décallage, il est possible de lui appliquer un fond qui se repete, voici le SVG utilisé sur la premiere démonstration, la repetition est effectué par un gradient appliqué comme image de fond:

<svg width="50"  style="background:radial-gradient(circle at  24% 25%, black 20%, transparent 20%) 0 0 / 50px 89px;" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"></svg>

Le svg transposé en data-uri sera utilisable dans la feuille de style comme image de reference pour shape-outside,
outils en ligne pour créer ce type d'url dopiaza.org - tool datauri et pour vous aider a choisir le bon mime type: MDN MIME Types., ce qui donne, ci-dessous, ce type d'url à inserer dans url():

shape-outside: url(data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2250%22%20%20style%3D%22background%3Aradial-gradient%28circle%20at%20%2024%25%2025%25%2C%20black%2020%25%2C%20transparent%2020%25%29%200%200%20%2F%2050px%2089px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E);

demo en ligne modifiable à votre guise, passez la souris au dessus pour visualiser le gradient qui se repete sur l'element flottant

See the Pen demo hex grid by gc-nomade (@gc-nomade) on CodePen.