Comment créer des images parfaitement centrées dans des boîtes asymétriques à l'aide de CSS ?

Créer des images symétriques avec des lignes diagonales

Dans le domaine de la conception Web, la création de visuels captivants et visuellement attrayants est primordiale. Une technique qui a gagné en popularité est la disposition symétrique d'images séparées par des lignes diagonales, semblable à la bannière frappante sur laquelle vous êtes tombé par hasard sur Reddit.

Pour obtenir cet effet, vous vous êtes lancé dans une aventure de codage utilisant CSS, mais vous avez rencontré quelques défis. Vos images n'étaient pas réparties uniformément dans les cases et certaines débordaient même. Examinons une solution alternative qui résout ces problèmes.

Au lieu de nous appuyer sur des éléments positionnés, nous allons exploiter la puissance de la position d'arrière-plan pour centrer nos images sans effort. L'extrait de code ci-dessous propose une approche simplifiée mais efficace :

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

Lorsqu'il est appliqué à cette structure HTML :

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

Le résultat est un ensemble d'images parfaitement centrées et régulièrement espacées. dans les cases inclinées, créant un effet visuel captivant et équilibré.

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!