CSS: Dreiecke darstellen ohne zusätzliche Grafiken
Ab und an benötigt man für das Design des eigenes Blogs bzw. der eigenes Website geometrische Formen, wie z.B. Dreiecke für Sprechblasen oder Buttons.
Die Darstellung eines Dreiecks könnt ihr zum einen mit einer Grafik, die ihr einbindet realsieren oder ihr nutzt einfach CSS.
In diesem Artikel stelle ich euch vor, wie ihr mittels CSS Dreiecke zeichnen bzw. darstellen könnt.
CSS: border-Eigenschaft für Dreiecke
Zur Darstellung von Dreiecken mit CSS dient uns die border-Eigenschaft. Die Browser zeichnen die Ränder nämlich so, dass alle 4 Ränder die gleiche Größe haben. Zum Verständnis folgendes Beispiel:
div {
width: 0px;
height: 0px;
border-width: 30px;
border-color: red lightgreen lightblue yellow;
border-style: solid;
}
Damit würden wir folgendes Ergebnis erhalten:
Die Browser zeichnen die Ränder von den äußeren zu den inneren Ecken. Das wird bei folgendem Beispiel noch deutlicher:
Der Innenraum ist in diesem Fall der eigentliche Inhalt des div-Elements.
Einzelnes Dreieck zeichnen
Wenn wir nun ein einzelnes Dreieck zeichnen möchten, können wir die nicht benötigten Ränder transparent darstellen:
div {
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid red;
}
Ergebnis:
Weitere Ansätze und Beispiele
Hier findet ihr weitere Ansätze, Ideen und Beispiele zur Darstellung von Dreiecken mit CSS:
Pure CSS Triangles
Creating Triangles in CSS
Zick-Zack-Linien mit CSS3
Fazit
Wie ihr seht, könnt ihr auch ohne die Einbindung von zusätzlichen Grafiken, geometrische Formen, wie z.B. Dreiecke mit reinem CSS zeichnen.
Wie findet ihr diese Technik? Wusstet ihr, dass die Browser die Ränder so rendern, dass sich dadurch Dreiecke darstellen lassen? Kennt ihr eventuell weitere solcher CSS-Techniken?
