Wie kann ich einen einseitigen CSS3-Skew-Transformationseffekt mit einem transparenten Bereich erstellen?

CSS3 Skew Transformation on One Side

Zu verstehen, wie man einen „CSS3 Transform Skew One Side“-Effekt erstellt, kann für verschiedene Webdesign-Projekte nützlich sein. Es ist jedoch wichtig zu beachten, dass die einfache Anwendung einer Skew-Transformation möglicherweise nicht die gewünschten Ergebnisse liefert, wenn ein Bild als Hintergrund verwendet wird.

Lösung des Problems

In Ihrem Fall In diesem Fall benötigen Sie eine CSS3-Transformation, um nur eine Seite eines Bildes zu neigen und gleichzeitig einen transparenten geneigten Bereich beizubehalten. Die bereitgestellte Lösung mit festen Rändern wird diesen Effekt nicht effektiv erzielen.

Die Lösung: Verschachteltes Div mit entgegengesetzter Schräge

Um den gewünschten Effekt zu erzielen, sollten Sie die Verwendung eines verschachtelten Div in Betracht ziehen div für das Bild und Anwenden eines Skew-Werts, der dem des übergeordneten div entgegengesetzt ist. Wenn Sie beispielsweise eine 20-Grad-Neigung auf den übergeordneten Container angewendet haben, geben Sie dem verschachtelten (Bild-)Div einen Neigungswert von -20 Grad.

Beispielcode:

Zur Veranschaulichung hier ein Beispiel mit einem Container und verschachtelten Divs:

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Dieser Code erstellt einen 20-Grad-Schrägheit am roten Parallelogrammbehälter. Darin wird ein Bild in einem verschachtelten Div mit einer Neigung von -20 Grad platziert, wodurch die auf den übergeordneten Container angewendete Neigung effektiv umgekehrt wird und der transparente geneigte Bereich dahinter sichtbar wird.

Das obige ist der detaillierte Inhalt vonWie kann ich einen einseitigen CSS3-Skew-Transformationseffekt mit einem transparenten Bereich erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!