Comment recréer une bannière symétrique avec cinq images en utilisant CSS ?

Émuler une bannière divisée symétriquement avec cinq images

Le thème populaire sur Reddit représentant une bannière avec cinq images symétriques séparées par des lignes diagonales a inspiré l'émulation d'un design similaire en utilisant CSS. L'objectif est de créer une bannière où les images sont réparties uniformément et confinées dans des cases.

Implémentation CSS

Le CSS révisé applique les modifications suivantes :

• Utilise Flexbox pour la mise en page, garantissant une distribution égale des images.
• Incline les boîtes selon un angle et utilise un pseudo-élément pour créer les lignes diagonales.
• Les images d'arrière-plan sont attribuées à l'aide de variables CSS pour une personnalisation facile.
• Définit un conteneur avec une hauteur et des marges d'espacement spécifiques.

Structure HTML

La structure HTML se compose d'un conteneur avec cinq éléments de boîte, chacun étant affecté à une image d'arrière-plan via la variable CSS --i.

Voici le code CSS et HTML :

.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;
}

<div class="container">
  <div class="box">

En implémentant ces ajustements, le CSS émule désormais la bannière symétrique souhaitée avec des images séparées en diagonale.

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!