Créer une bannière avec 5 images symétriques séparées par des lignes diagonales

Émuler une bannière d'images symétriques

À une époque de contenu visuel captivant, créer visuellement des designs attrayants sont devenus impératifs. Cette quête de l’excellence esthétique a amené l’utilisateur à tomber sur une bannière saisissante sur Reddit, présentant cinq images disposées symétriquement et séparées par des lignes diagonales. Inspiré par cette conception, l'utilisateur s'est lancé dans un voyage pour émuler quelque chose de similaire, en incorporant cinq images de son choix et en ajoutant des superpositions de texte. Après quelques expérimentations avec CSS et des images de chats, l'utilisateur a rencontré des problèmes de placement et de distribution des images.

Une solution simplifiée

Au lieu de s'appuyer sur des éléments de positionnement, l'utilisateur a adopté une approche plus simple en utilisant Flexbox. . En créant un conteneur avec cinq éléments Flexbox et en appliquant des transformations d'inclinaison à chaque boîte, l'effet souhaité a été obtenu sans avoir besoin d'un positionnement complexe.

L'extrait suivant montre comment créer cet agencement d'images symétrique :

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}