Webdesign – Cascading Stylesheets
CSS – Kasten mit Ecke

Layout – CSS ___

Ein gutes Layout braucht Struktur. Kästen sind eine beliebte Methode, um Inhalte voneinander abzugrenzen. Nur schön ist das oft nicht. Der Trick mit der Ecke hilft – und kommt sogar ganz ohne aufwendige Grafiken aus. Sie benötigen zwei CSS-Container. Der äußere bestimmt die Breite und die Hintergrundfarbe des Kastens, sowie Formatierungen wie Schriftgröße und Ähnliches. Container Nummer zwei sorgt für die Ecke. In unserem Beispiel 16 Pixel. Mit float wird das Ganze nach rechts ausgerichtet. Damit könnte man beinahe zufrieden sein. Nur müssen wir einen Weg finden, damit der Inhalt nicht direkt den Rand des Kastens berührt. Das ist zwar einfach via padding zu machen, doch auch die Ecke hält sich an den vergrößerten Randabstand. Die Lösung: Sie setzen einen weiteren Container ein. Dieser enthält die Angaben für das Padding, nicht der äußere. Als Quellcode stellt sich das dann so dar:

Kästen mit Ecken werden mit allen modernen Browsern auf dieselbe Art dargestellt. Eine Grafik ist nicht mehr erforderlich.