Creación de un banner con 5 imágenes simétricas separadas por líneas diagonales

Emulación de un banner con imágenes simétricas

En una era de contenido visual cautivador, cree visualmente diseños atractivos se ha vuelto imperativo. Esta búsqueda de la excelencia estética llevó al usuario a toparse con un llamativo banner en Reddit, que presenta cinco imágenes dispuestas simétricamente separadas por líneas diagonales. Inspirado por este diseño, el usuario se embarcó en un viaje para emular algo similar, incorporando cinco imágenes de su elección y agregando texto superpuesto. Después de experimentar un poco usando CSS e imágenes de gatos, el usuario encontró desafíos con la ubicación y distribución de las imágenes.

Una solución simplificada

En lugar de depender de elementos de posicionamiento, el usuario adoptó un enfoque más sencillo usando Flexbox . Al crear un contenedor con cinco elementos de Flexbox y aplicar transformaciones de inclinación a cada cuadro, se logró el efecto deseado sin la necesidad de un posicionamiento complejo.

El siguiente fragmento muestra cómo crear esta disposición de imagen simétrica:

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