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

.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.

<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

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien