Wie erstelle ich mit CSS ein symmetrisches Banner mit fünf Bildern?

Emulation eines symmetrisch geteilten Banners mit fünf Bildern

Das beliebte Thema auf Reddit, das ein Banner mit fünf symmetrischen, durch diagonale Linien getrennten Bildern darstellt, hat inspiriert die Emulation eines ähnlichen Designs mittels CSS. Ziel ist es, ein Banner zu erstellen, bei dem die Bilder gleichmäßig verteilt und auf Kästchen beschränkt sind.

CSS-Implementierung

Das überarbeitete CSS wendet die folgenden Änderungen an:

• Verwendet Flexbox für das Layout und sorgt so für eine gleichmäßige Verteilung der Bilder.
• Neigt die Boxen in einem Winkel und Verwendet ein Pseudoelement, um die diagonalen Linien zu erstellen.
• Hintergrundbilder werden zur einfachen Anpassung mithilfe von CSS-Variablen zugewiesen.
• Definiert einen Container mit einer bestimmten Höhe und Rändern für den Abstand.

HTML-Struktur

Die HTML-Struktur besteht aus einem Container mit fünf Box-Elementen, denen jeweils ein Hintergrundbild zugeordnet ist über die CSS-Variable --i.

Hier der CSS- und HTML-Code:

.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">

Durch die Implementierung dieser Anpassungen emuliert das CSS nun das gewünschte symmetrische Banner mit diagonal getrennten Bildern .

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS ein symmetrisches Banner mit fünf Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!