So erstellen Sie einen Halbkreis mit CSS

”-Element innerhalb des body-Tags unserer HTML-Datei.

---

---

HTML

< div >< / div >

Legen Sie nun die geeigneten Dimensionen für das div fest, z. B. weisen wir dem „ Breite „Immobilienwert als“ 180px ' und ' Höhe „Eigentum mit Wert“ 90px “. Stellen Sie im nächsten Schritt das „ Grenzradius ' Eigentumswert ' 12rem 12rem 0 0 “; wobei die erste Ziffer 12rem die obere linke Seite des div trimmt, die zweite 12rem die obere rechte Seite trimmt, die dritte und vierte Ziffer 0 den gesamten unteren Teil des div ausschneidet. Um dem Kreis schließlich eine Farbe zu geben, verwenden Sie das „ Hintergrundfarbe „Eigenschaft mit dem Wert“ Violett “.

CSS

div {
Breite : 180px ;
Höhe : 90px ;
Grenzradius : 12Rem 12Rem 0 0 ;
Hintergrundfarbe : Violett ;
}

Speichern Sie die HTML-Datei mit dem genannten Code und öffnen Sie sie in Ihrem Browser:

Wie Sie sehen können, haben wir erfolgreich einen Halbkreis mit der CSS-Eigenschaft border-radius erstellt.

Beispiel 2: Erstellen Sie einen Halbkreis von unten mit CSS

Für die Bildung eines Halbkreises von unten setzen wir Eigenschaftswerte für den Randradius als „ 0 0 12rem 12rem “, wobei die ersten beiden Werte den oberen linken und oberen rechten Randradius darstellen. Wir haben sie auf 0 gesetzt, damit die obere Hälfte des div vollständig verschwindet. Für den Boden haben wir nur unten links und unten rechts ein wenig getrimmt, indem wir die Werte auf 12rem gesetzt haben.

CSS

div {
Breite : 180px ;
Höhe : 90px ;
Grenzradius : 0 0 12Rem 12Rem ;
Hintergrundfarbe : Violett ;
}

Ausgabe

Beispiel 3: Erstellen Sie mit CSS einen Halbkreis von rechts

Um einen CSS-Halbkreis nach rechts zu erstellen, passen Sie zunächst die Höhe und Breite des Containers so an, wie es für die richtige Form des Kreises erforderlich ist. Stellen Sie das „ Breite ' wie ' 90px ' und ' Höhe ' wie ' 180px ' diesmal. Verwenden Sie erneut die Eigenschaft border-radius mit dem Wert „ 0 12rem 12rem 0 “, wobei der erste Wert 0 für die obere linke Seite, der letzte Wert 0 für die untere linke Seite ist und der zweite und dritte Wert hinzugefügt werden, um die obere rechte und untere rechte Seite zu trimmen. Wenn Sie diese Werte anwenden, wird ein Halbkreis von rechts gebildet.

CSS

div {
Breite : 90px ;
Höhe : 180px ;
Grenzradius : 0 12Rem 12Rem 0 ;
Hintergrundfarbe : Violett ;
}

Ausgabe

Beispiel 4: Erstellen Sie einen Halbkreis von links mit CSS

Geben Sie dieses Mal die Eigenschaft border-radius zusammen mit dem Wert „ 12rem 0 0 12rem “; der erste und letzte Wert 12rem schneidet die obere linke und untere linke Seite des div ab, wenn Sie den zweiten und dritten Wert auf 0 setzen, wird die obere rechte und untere rechte Seite des Kreises gelöscht. Schließlich wird unser linker Halbkreis erstellt.

CSS

div {
Breite : 90px ;
Höhe : 180px ;
Grenzradius : 12Rem 0 0 12Rem ;
Hintergrundfarbe : Violett ;
}

Ausgabe

Wir haben verschiedene Methoden zur Erstellung eines Halbkreises mit CSS angeboten.

Fazit

Um einen Halbkreis zu erstellen, können wir einfach das CSS „ Grenzradius ' Eigentum. Der Halbkreis kann von Seite zu Seite erstellt werden, z. B. nach links, rechts, oben und unten. In der Eigenschaft border-radius ist der Anfangswert für die obere linke Seite, der zweite für die obere rechte Seite, der dritte für die untere rechte Seite und der vierte Wert für die untere linke Seite. In diesem Artikel wurde erklärt, wie man mit CSS einen Halbkreis erstellt.