Wie erstelle ich mit CSS perfekt zentrierte Bilder in schiefen Boxen?

Symmetrische Bilder mit diagonalen Linien erstellen

Im Bereich Webdesign ist die Erstellung fesselnder und optisch ansprechender Grafiken von größter Bedeutung. Eine Technik, die an Popularität gewonnen hat, ist die symmetrische Anordnung von Bildern, die durch diagonale Linien getrennt sind, ähnlich dem auffälligen Banner, über das Sie auf Reddit gestolpert sind.

Um diesen Effekt zu erzielen, haben Sie sich auf ein Codierungsabenteuer mit CSS eingelassen, sind aber auf etwas gestoßen einige Herausforderungen. Ihre Bilder waren nicht gleichmäßig in den Kartons verteilt und einige liefen sogar über. Schauen wir uns eine alternative Lösung an, die diese Probleme angeht.

Anstatt uns auf positionierte Elemente zu verlassen, nutzen wir die Leistungsfähigkeit der Hintergrundpositionierung, um unsere Bilder mühelos zu zentrieren. Das folgende Code-Snippet bietet einen vereinfachten, aber effektiven Ansatz:

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

Bei Anwendung auf diese HTML-Struktur:

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

Das Ergebnis ist eine Reihe von Bildern, die perfekt zentriert und gleichmäßig verteilt sind innerhalb der schrägen Kästchen, wodurch ein fesselnder und ausgewogener visueller Effekt entsteht.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS perfekt zentrierte Bilder in schiefen Boxen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!