Dreiecke sind ein super Gestaltungsmittel. In Listen und Überschriften werden sie gerne von der Grafik verbaut, um Struktur und Gliederung zu vermitteln. Doch wie verbaut das Frontend diese Dreiecke? Eine Möglichkeit wäre, eine Grafik abzulegen und das Dreieck als Hintergrund einzubinden. Doch was sagt uns die erste der 14 Regeln zu Einhaltung von High Performance Websites? Richtig, Vermeide HTTP Requests. Warum eine Grafik vom Server anfordern, wenn ich sie auch mittels CSS gestalten kann. Der benötigte Code scheint zunächst fremdartig, beim zweiten Blick aber absolut einleuchtend und simpel:
.dreieck {
height: 0;
width: 0;
border-color: transparent transparent #CCC transparent;
border-style: solid;
border-width: 5px
/* zzgl. Positionierung */
}
Durch klugen Einsatz des Box-Modells ist nur der untere Rahmen farbig (grau, #CCC). Alle anderen sind transparent. Da die Box außerdem keinen Content hat, ist nur der Rahmen sichtbar, was somit den Dreieck-Effekt erzeugt. Das kann im Browser dann wie folgt aussehen:
Die Browserunterstützung ist sehr gut. Nur IE6 versteht die Angabe transparent nicht. Wer diesen auch noch unterstützen möchte muss mit den border-colors spielen und Farben des Hintergrunds verwenden um Transparenz vorzutäuschen.
Viel Spaß beim Anwenden!