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
Es gibt verschiedene Methoden, um in CSS einen Kreis zu erstellen. Die gebräuchlichsten sind:
border-radius
ab, bis sie einen Kreis bilden..kreis {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
}
border-image
definiert..kreis {
width: 100px;
height: 100px;
border-image: url('kreis.png') 1 round repeat;
}
circle()
, um die Form eines Kreises zu definieren.clip-path
auf ein beliebiges Element anwenden, um seine Form auszuschneiden..kreis {
width: 100px;
height: 100px;
background-color: #f00;
clip-path: circle(50% at 50% 50%);
}
:before
oder :after
verwenden, um einen Kreis über einem Element zu erstellen..kreis {
width: 100px;
height: 100px;
position: relative;
}
.kreis:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
transform: translate(-50%, -50%);
}
rotate
oder scale
verwenden, um den Kreis zu drehen oder zu skalieren.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