smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

CSS: Dreiecke darstellen ohne zusätzliche Grafiken

26. November 2012
Stephan
Dreiecke mit CSS darstellen

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?

Kommentare  
2 Kommentare vorhanden
1 Ralphr allem schrieb am 28. November 2012 um 16:33 Uhr

Ich finde es immer wieder erfreulich, was man vor allem mit CSS3 alles machen kann. Das Ausschneiden von Grafiken aus Photoshop-Entwürfen kann man sich für viele Layouts einfach langsam sparen. ;-)

2 Maik schrieb am 30. November 2012 um 13:55 Uhr

Danke für die Info und gut das ich diesen Blog gefunden habe. Das hat mir echt einige zeit eingespart.

1 Trackback/Pingback vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!