Artikel
CSS-Dreiecke
Funktionsweise
Die Dreiecke werden über die border-Eigenschaft von CSS realisiert:
Zunächst einmal wird ein Element mit einem Rahmen versehen. So weit, so bekannt.
Vergrößert man den Rahmen nun sehr stark - bei gleichzeitig sehr kleinem Inhalt, erhält man die Ausgangsform für die Dreiecke in CSS:
Wenn man jetzt den Rahmen an einigen Seiten entfernt (border-color:transparent;), erhält man das gewünschte Dreieck (in dem Beispiel habe ich die anderen Rahmen auf einen helleren Rotton gesetzt):
Hinweis: Die Technik lässt sich am Flexibelsten mit allen 4 Rahmen einsetzen, es funktioniert allerdings auch mit nur 2 Rahmen. Was letztendlich sichtbar ist, bestimmt man über die Rahmenfarbe, die Rahmen müssen aber in jedem Fall gesetzt werden.
Leere Elemente vermeiden
Leider hätte ein Einsatz der Technik in dieser Form einen entscheidenden Nachteil: Das Element, dass das Dreieck erzeugt, hätte eine Höhe und Breite von 0 Pixeln (in den beiden oberen Beispielen habe ich, zur Veranschaulichung, den Inhalt auf 1px gesetzt, damit die Dreiecke aber nicht zu Trapezen mutieren, sollte der Inhalt möglichst 0 Pixel betragen). Somit hätten wir einige leere Elemente ohne weitere semantische Bedeutung.
Glücklicherweise gibt es aber einen Ausweg aus diesem Dilemma: Die beiden Pseudo-Klassen ::before und ::after. Setzt man die content-Eigenschaft auf
" " (ein Leerzeichen), display auf block; und vergibt Werte für height und
width, kann man die jeweilige Pseudo-Klasse wie ein gewöhnliches Element stylen:
Dieses Mal hat das Element sogar Inhalt.
Erzeugt man nun anstelle des Vierecks ein Dreieck wie oben beschrieben und verschiebt dieses mittels absoluter Positionierung nach links, erhält man den gewünschten Effekt:
Et voilà: Dreieck und Inhalt
Breadcrumb-Navigation
Diesen Trick kann man sich gut bei Breadcrumb-Navigationen zunutze machen.
Tipp: Will man einzelne Menüpunkte besonders hervorheben, bietet sich der CSS 3-Selektor :nth-child() an.
Download-Button
Die möglichen Einsatzgebiete gehen aber über Breadcrumb-Navigationen hinaus. So könnte man beispielsweise einen Download-Button ebenfalls mit den Dreiecken gestalten...
Listen-Symbole
... oder vielleicht Listen-Symbole:
Weitere mögliche Einsatzszenarien
Bei Fortschrittsanzeigen (zum Beispiel bei einem Bezahlvorgang) oder einem Dateibrowser (für explorer-ähnliche, erweiterbare Bereiche) könnte man diese Dreiecke ebenfalls gut einsetzen.
Prinzipiell lässt sich beinahe jedes Dreieck mit dieser Technik ersetzen, wodurch es theoretisch sehr viele Möglichkeiten gibt, diese Technik einzusetzen.
Probleme im Praxiseinsatz
Browser-Support
Auch wenn es sich um keine neue CSS 3-Eigenschaft handelt, ist der Browser-Support doch ähnlich wie bei CSS 3.
Dreimal dürft ihr raten, welche Browser mit den CSS-Dreiecken nichts anfangen können. Richtig. Unsere allseits geliebten Internet Explorer 6 und 7. Internet Explorer 8 und neuer können die Dreiecke wie gewünscht darstellen.
Die anderen (modernen) Browser haben in der Regel keine Probleme, die Dreiecke darzustellen - zumindest in der derzeit aktuellen (stabilen) Version.
border-Eigenschaft wird auf Dreiecke erweitert
Webdesigner, die zum Unterstreichen von Text (üblicherweise bei Links) die border-Eigenschaft, aufgrund der größeren Flexibilität gegenüber der
text-decoration-Eigenschaft, bevorzugen, werden mit CSS-Dreiecken wohl kaum glücklich werden, denn die
border-Eigenschaft funktioniert nicht mehr so, wie erhofft: Die Dreiecke werden zu einem Teil des Inhalts (den beiden Pseudo-Klassen ::after und ::before sei Dank) und damit auch unterstrichen.
Komplizierte Implementierung
So schön das Ganze auch sein mag, einfach ist die Anwendung dieser Technik nicht. Die Herangehensweise ist erst einmal ziemlich ungewohnt und neu. Webdesigner, die die beiden Pseudo-Klassen
::before und ::after öfter einsetzen, werden sich aber schnell zurechtfinden.
Vorteile gegenüber Grafiken
Bei den ganzen Nachteilen muss das Ganze dann aber doch irgendwelche Vorteile bieten... Und diese Vorteile gibt es auch:
Weniger HTTP-Request und kleinere Dateigrößen
Letztendlich kann man damit seine Webseite noch ein Stückchen kleiner bekommen und schneller anzeigen lassen (alle die, die mit der Stoppuhr oder einer tollen App die Millisekunden beim Aufbau Ihrer Webseite messen, werden wissen, wovon ich rede). Auch wenn einige Zeilen Code nötig sind, schrumpft die Dateigröße der gesamten Webseite um wenigstens einige Byte, während gleichzeitig die Anzahl der HTTP-Request kleiner wird - schließlich braucht man keine extra Bilddateien mehr zu laden.
Skalierbar wie Vektorgrafiken
Sofern man die Dreiecke nicht mit absoluten Einheiten, sondern beispielsweise mit (r)em oder % anlegt, erhält man eine Art Vektorgrafik. Eine wirkliche Grafik ist es natürlich nicht, aber der Vorteil der schier endlosen Skalierbarkeit ist trotzdem vorhanden.
Der Original-Artikel erschien im bei t3n.de unter dem Namen CSS-Dreiecke.
Der Artikel wurde zuletzt im überarbeitet.