Wie bekommt man schräge Flächen in HTML und CSS?
Beinahe alle Websites haben eines gemeinsam: Klare, rechteckige Formen.
Allerdings gibt es tolle Möglichkeiten sich mit schrägen Flächen und Kanten und Trapez- oder Skew-Effekten und Dreiecken abzuheben.
Dazu sind keine Bildgrafiken nötig, sondern man kann mit den richtigen Methoden das Ganze direkt über CSS und HTML lösen. Der Vorteil: Größen und Farben lassen sich leicht und schnell verändern, Unterstützung von Retina-Displays und geringere Ladezeiten.
CSS-Border
Das “border”-Attribute haben Sie sicherlich schon oft verwendet, aber haben Sie schon schräge Formen damit gestaltet?
Um jedes HTML-Element herum lässt sich ein Rahmen setzen. Dieser kann für oben, unten, links und rechts separat behandelt werden:
Was dabei viele außer Acht lassen, ist dass eine Kante zur Anderen in einem Winkel mit 45° anstößt. Bei einer Border-Breite von 20px wird dies deutlich:
Dieses Verhalten welches von allen Browsern unterstützt wird, können wir uns für Schrägen zu Nutze machen, indem wir das Element auf eine Breite und Höhe von 0px reduzieren:
Nun müssen lediglich die Fraben der 4 Kanten entsprechend angepasst werden, um folgende Dreiecke zu erhalten:
Über diese Methode und der Kombinaton aus beispielsweise 2 Kanten lässt sich nun eine Schräge bekommen:
- Oberer Rahmen: transparent
- Unterer Rahmen: grün
- Linker Rahmen: transparent
- Rechter Rahmen: grün
Mit diesem Prinzip lassen sich folgende Formen problemlos mit CSS und HTML, ohne zusätzliche Grafiken gestalten: