HTML kann ganz schön schräg sein.

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:

Im Herzen Süddeutsch. Im Handeln Weltoffen.

Kontakt aufnehmen