Comment créer des dispositions d'images symétriques avec des lignes diagonales à l'aide de CSS ?

Images symétriquement séparées avec des lignes diagonales

Introduction

Créer des arrangements d'images symétriques séparés par des lignes diagonales est un modèle de conception récurrent souvent trouvé dans la conception Web et graphique. Ce didacticiel explore comment obtenir cet effet à l'aide de CSS, en résolvant les problèmes rencontrés avec les approches précédentes où les images restaient en dehors des conteneurs et étaient inégalement réparties.

Solution CSS simplifiée

Pour éliminer L'utilisation d'éléments positionnés et simplifier le code, une combinaison de Flexbox et de background-position peut être utilisée. Voici le CSS amélioré :

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

Structure HTML

La structure HTML d'affichage des images a également été simplifiée :

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

Explication

Cette approche simplifiée utilise Flexbox pour répartir les boîtes uniformément dans le conteneur. Chaque boîte reçoit une image d'arrière-plan définie à l'aide de la variable CSS --i. La transformation oblique sur les cases crée l'effet diagonal.

Avantages

La structure CSS et HTML améliorée offre plusieurs avantages :

• Simplifié code
• Positionnement facile de l'image à l'aide de background-position
• Distribution uniforme de l'image dans le conteneur
• Performances améliorées grâce à la réduction des éléments DOM et du positionnement

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!