CSS3 SCSW -Transformation auf einer Seite

Verständnis, wie man einen "CSS3 Transformation SCSW One Side" -Effekt "für verschiedene Webdesign -Projekte erstellen. Es ist jedoch wichtig zu beachten, dass die ledigliche Anwendung einer Schrägtransformation möglicherweise nicht die gewünschten Ergebnisse erzielt, wenn ein Bild für den Hintergrund verwendet wird.

das Problem

In Ihrem spezifischen Fall benötigen Sie einen CSS3 -Transformation auf nur eine Seite eines Bildes, während Sie einen transparenten Seuzbereich behalten. Die bereitgestellte Lösung, die mit soliden Grenzen verwendet wird, wird diesen Effekt nicht effektiv erreichen.

Die Lösung: verschachtelte Div mit entgegengesetzten Schießerei

, um den gewünschten Effekt zu erreichen, erwägen Sie, ein verschachteltes DIV für das Bild zu verwenden und einen SWEW -Wert gegenüber dem der des übergeordneten Divs zu verwenden. Zum Beispiel, wenn Sie einen 20 -Grad -Schauch auf den Elternbehälter angewendet haben, geben Sie dem verschachtelten (Bild) div einen Schauch Wert von -20 Grad an. Überlauf: versteckt; } #Parallelogramm { Breite: 150px; Höhe: 100px; Rand: 0 0 0 -20px; Transformation: Sack (20DEG); Hintergrund: Rot; Überlauf: versteckt; Position: Relativ; } .Bild { Hintergrund: URL (http://placekitten.com/301/301); Position: absolut; Top: -30px; Links: -30px; Rechts: -30px; unten: -30px; Transformation: SCEW (-20 Grad); }

Dieser Code erstellt einen 20-Grad-Schuss auf dem roten Parallelogramm-Container. Im Inneren wird ein Bild in einem verschachtelten DIV mit einem Schauch von -20 Grad platziert, wodurch der auf den übergeordnete Container angewendete Schiefel effektiv umgekehrt wird und den transparenten, verdrückten Bereich dahinter enthüllt.