Erstellen eines Banners mit 5 symmetrischen Bildern, die durch diagonale Linien getrennt sind

Emulieren eines symmetrischen Bildbanners

In einer Zeit fesselnder visueller Inhalte gilt es, visuell zu gestalten Ansprechende Designs sind unerlässlich geworden. Dieses Streben nach ästhetischer Exzellenz führte dazu, dass der Benutzer auf Reddit auf ein auffälliges Banner stieß, das fünf symmetrisch angeordnete Bilder enthielt, die durch diagonale Linien getrennt waren. Inspiriert von diesem Design begab sich der Benutzer auf die Reise, etwas Ähnliches zu emulieren, indem er fünf Bilder seiner Wahl einfügte und Textüberlagerungen hinzufügte. Nach einigen Experimenten mit CSS und Katzenbildern stieß der Benutzer auf Herausforderungen bei der Platzierung und Verteilung von Bildern.

Eine vereinfachte Lösung

Anstatt sich auf Positionierungselemente zu verlassen, wählte der Benutzer mit Flexbox einen einfacheren Ansatz . Durch die Erstellung eines Containers mit fünf Flexbox-Elementen und die Anwendung von Schrägtransformationen auf jede Box wurde der gewünschte Effekt erzielt, ohne dass eine komplexe Positionierung erforderlich war.

Der folgende Ausschnitt zeigt, wie diese symmetrische Bildanordnung erstellt wird:

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