Kemmerzell.org


CSS: Dreiecke ohne Grafiken darstellen

Von Maximilian · 28.12.2013 · Kategorie: CSS

Beim Gestalten einer neuen Website braucht man immer wieder auch geometrische Elemente. Am häufigsten verwendet man dabei wohl Rechtecke. Das ist mit HTML und CSS kein Problem. Doch ab und an braucht man auch mal Dreiecke für Buttons, Sprechblasen oder andere Elemente. Zur Darstellung eines solchen Dreiecks könnte man dann natürlich Grafiken verwenden. Doch das ist recht unschön und könnte eventuell zu längeren Ladezeiten der entsprechenden Website führen.

Man kann Dreiecke aber auch ohne Grafiken und nur mit der Hilfe von CSS recht einfach darstellen. Dazu nutzt man einfach die border-Eigenschaft. Denn im Browser werden die Ränder immer so dargestellt, dass alle vier Ränder die gleiche Größe haben. Dadurch kann man einfach die Breite des Randes festlegen. Dadurch entstehen bei vier Rändern gleich vier Dreiecke. Der CSS-Code dafür würde dann folgendermaßen aussehen:

Da die Ränder im Browser immer von den äußeren zu den inneren Rändern gezeichnet werden, sähe das Ganze dann so aus, wenn man es auf einer Website so umsetzen würde:

In der Mitte zwischen den vier Dreiecken würde sich dann der Inhalte des eigentlichen div-Containers befinden. Lässt man diesen aber leer, erhält man nur die Dreiecke. Doch nun hat man vier Dreiecke. Meist benötigt man aber nur ein einzelnes Dreieck. Dieses Problem lässt sich jedoch ganz einfach lösen. So kann man einfach die Ränder, die nicht benötigt werden, auf transparent stellen. Der CSS-Code dazu würde dann so aussehen:

Setzt man diesen dann wieder auf einer Internetseite ein, hat man sein gewünschtes Dreieck. Natürlich können so auch zwei oder drei Dreiecke dargestellt werden. Dazu muss man dann einfach die Ränder auf transparent setzen, die man nicht benötigt. Im Normalfall reicht ein einzelnes Dreieck jedoch aus. Das würde dann folgendermaßen aussehen:

Dreiecke können also auch ohne zusätzliche Grafiken ganz einfach mit der Hilfe von CSS dargestellt werden. Dadurch kann man sich das lästige Erstellen von Grafiken mit Photoshop sparen und hat eine flexiblere und meist schnellere Internetseite. Und schneller beim Erstellen einer Website ist diese Variante meist auch noch.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Am 31. Dezember 2013 um 15:35 Uhr

[…] Schöner ist da doch eine Lösung mit reinem CSS. Und das ist eigentlich gar nicht schwer. Wie man mit reinem CSS ein Dreieck erstellt, habe ich bereits vor ein paar Tagen erklärt. Darum soll es heute einmal um die Erstellung eines Kreises mit reinem CSS-Code […]

Am 11. Januar 2014 um 18:31 Uhr

[…] mittlerweile auch ganz einfach mit ein wenig HTML und CSS umgesetzt werden. Und dies ist nicht nur mit Dreiecken, Vierecken oder Kreisen möglich, sondern auch Sprechblasen kann man ganz einfach per CSS […]

Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!