CSS: Kreis mit Text erstellen – So gehts

Wenn du in CSS einen Kreis darstellen willst dann ist das garnicht so schwer. Im Folgenden Beispiel zeige ich dir wie man einen Kreis darstellen kann

Beispiel: Kreis mit Text in CSS erstellen

Als erstes erstellen wir uns eine neue CSS Klasse mit dem Namen .kreis

1
2
3
4
5
6
7
8
9
10
11
.kreis
    {
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#428af5
    }

Der HTML Code dazu sieht dann so aus. Der Text ist natürlich beliebig oder du lässt ihn weg.

1
<div class="kreis">Dies ist ein Kreis</div>

Ergebnis

Das Ergebnis kann sich sehen lassen. Ein schöner blauer Kreis mit Text in der Mitte

Dies ist ein Kreis




weitere Beiträge zum Thema CSS




Schreibe einen Kommentar



24791