Webmaster: Kreis zeichnen mit CSS

Kreise mit CSS, ganz ohne Bilder? Das geht und passt sich so auch noch der Auflösung an! Mit CSS ist es nämlich ganz ohne Grafiken möglich, einfache Elemente zu zeichnen. Rechteckige Boxen sind dabei sehr einfach, runde Formen etwas aufwendiger – aber nicht viel.

Durch die Eigenschaft “border-radius” lässt sich einem eckigen Element eine runde Ecke hinzufügen. Nimmt man jetzt einen sehr großen “border-radius” an allen vier Seiten des Elements, erhält man einen Kreis – über die Eigenschaft “background-color” lässt sich jetzt noch die Farbe festlegen:

 
Der Code dafür:

<style>
#kreis {
    background-color: #FFFFFF;
    width: 35px;
    height: 35px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
	border-radius: 20px;
}
</style>

<div id="kreis"></div>

Dies zeichnet einen kleinen, weißen Kreis. Soll der Kreis größer werden, muss man nur die Werte für “width” und “height” anpassen – und den Wert für “border-radius” deutlich größer wählen.

Der Vorteil: Anders als bei dem Skalieren einer Grafik wird der Kreis ohne Verluste oder hässliche Antialias-Effekte vergrößert und sieht daher auch in großer Version noch perfekt aus.

CSS: Kreis mit Rahmen zeichnen

Soll der Kreis nicht komplett gefüllt sein, sondern durchsichtig und nur mit einem Rahmen versehen, kann man statt der Hintergrund-Farbe einfach einen “border” setzen: Hier im Beispiel mit 2px Stärke, ebenfalls in weiß, dafür ohne Hintergrundfarbe:

 
Der Code dafür:

<style>
#kreis-rahmen {
    border: 2px solid #FFFFFF;
    width: 31px;
    height: 31px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
	border-radius: 20px;
}
</style>

<div id="kreis-rahmen"></div>

 
Achtung: Damit der Kreis mit der Outline genau so groß ist wie der gefüllte Kreis, muss man den Wert für “border” (jeweils für links als auch rechts) von der Breite und Höhe abziehen: Der Kreis ist daher nur 31 Pixel breit und hoch + jeweils zwei Mal der Rand von je 2 Pixeln!