Wie erstelle ich mit CSS symmetrische Bildanordnungen mit diagonalen Linien?

Symmetrisch getrennte Bilder mit diagonalen Linien

Einführung

Das Erstellen symmetrischer Bildanordnungen, die durch diagonale Linien getrennt sind, ist ein wiederkehrendes Designmuster häufig im Web- und Grafikdesign zu finden. In diesem Tutorial wird untersucht, wie dieser Effekt mithilfe von CSS erzielt werden kann. Dabei geht es um Probleme früherer Ansätze, bei denen Bilder außerhalb von Containern blieben und ungleichmäßig verteilt waren.

Vereinfachte CSS-Lösung

Zur Beseitigung Um die Verwendung positionierter Elemente zu vereinfachen und den Code zu vereinfachen, kann eine Kombination aus Flexbox und Hintergrundposition verwendet werden. Hier ist das verbesserte CSS:

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

HTML-Struktur

Die HTML-Struktur zur Anzeige der Bilder wurde ebenfalls vereinfacht:

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

Erklärung

Dieser vereinfachte Ansatz nutzt Flexbox, um die Kartons gleichmäßig innerhalb der Box zu verteilen Behälter. Jeder Box wird ein Hintergrundbild zugewiesen, das mithilfe der CSS-Variablen --i festgelegt wird. Die Schrägtransformation auf den Boxen erzeugt den Diagonaleffekt.

Vorteile

Die verbesserte CSS- und HTML-Struktur bietet mehrere Vorteile:

• Vereinfacht Code
• Einfache Bildpositionierung mit Hintergrundposition
• Gleichmäßige Bildverteilung innerhalb des Container
• Verbesserte Leistung durch reduzierte DOM-Elemente und Positionierung

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS symmetrische Bildanordnungen mit diagonalen Linien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!