Ziemlich schräg

Standardmäßig sind Elemente auf Webseiten rechteckig und senkrecht oder horizontal ausgerichtet: Texte in Absätze und Überschriften werden in westlichen Sprachen senkrecht untereinander angeordnet, Bilder befinden sich auf derselben Linie wie Text, Raster über Gridlayout sind ebenfalls rechteckig etc. Eine probate Auflockerung dieses Schemas ist es, schräge Elemente oder Hintergründe zu integrieren. So lassen sich im Hero-Bereich Schrägen definieren oder man verwendet Schrägen nur bei kleineren Komponenten. Dazu ein paar Beispiele aus dem Web:

Wie aber lassen sich Schrägen mit CSS umsetzen? Dafür stehen mehrere Techniken zur Auswahl – Sie können Elemente mit transform drehen oder verzerren und erhalten dadurch eine Schräge, auch clip-path erlaubt das Ausschneiden von Elementen und damit die Erzeugung von Schrägen. Dann wäre da außerdem noch die Eigenschaft border, die bei geschicktem Einsatz ebenfalls für Schrägen sorgen kann. Auch mit Hintergrundbildern lassen sich Schrägen erzeugen und solche Bilder können mit CSS generiert oder mit SVG umgesetzt werden.