Kemmerzell.org


CSS: Kreise ohne Grafiken darstellen

Von Maximilian · 31.12.2013 · Kategorie: CSS

Für das Gestalten einer neuen Internetseite greift man häufig auf verschiedene geometrische Figuren zurück. Am häufigsten kommen dabei wohl Rechtecke zum Einsatz. Doch auch Dreiecke oder Kreise braucht man ab und zu mal. Dies könnte man dann zwar durch Grafiken ganz einfach umsetzen, aber das ist immer recht unschön. Denn letztendlich kann das auch wieder zu längeren Ladezeiten der eigenen Internetseite führen. 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 gehen.

Dazu kann man nämlich einfach die border-Eigenschaft nutzen. Zunächst muss man jedoch ein Quadrat erstellen. Das ist mit einem div-Container kein Problem. Da es sich dabei um ein Quadrat handelt, müssen die Höhe und die Breite natürlich identisch sein. Diese bestimmen dabei auch den Durchmesser des gewünschten Kreises. Nun haben wir also erstmal ein Quadrat. Der CSS-Code dafür würde dann folgendermaßen aussehen:

Aber wir wollen ja einen Kreis haben. Und da kommen jetzt die Ränder ins Spiel. Denn um aus dem Quadrat einen Kreis zu machen, muss der boder-radius genau 50 Prozent der Breite des Quadrates sein. Setzt man dies im CSS-Code so um, bekommt man diesen CSS-Code:

Die direkte prozentuale Angabe ist dabei natürlich die einfachste Lösung. Das wird aber leider nicht von allen Browsern problemlos akzeptiert. Daher muss man in einigen Fällen auch den genauen Wert angeben, um Konflikte zu vermeiden. Das muss man dann im Einzelfall selbst entscheiden. Nun hat man jedenfalls eine Klasse für einen Kreis definiert. Diesen kann man dann ganz normal auf der Website für die Gestaltung einsetzen. In diesem Beispiel sähe der Kreis dann so aus:

Man kann Kreise also auch ganz einfach ohne zusätzliche Grafiken mit reinem CSS-Code erstellen. Das ist deutlich flexibler, da man die Größe des Kreises mit wenigen Handgriffen verändert kann. Schließlich muss man nur die Höhe und Breite des ursprünglichen Quadrates ändern. Gleichzeitig erspart man sich damit aber auch die lästige Arbeit in Photoshop und sorgt für schnellere Ladezeiten der eigenen Internetseite. Es hat also einige Vorteile solche geometrischen Elemente mit reinem CSS-Code umzusetzen.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Am 21. November 2014 um 21:56 Uhr

[…] 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!