So erstellen Sie einen Semi -Kreis mit CSS

CSS ermöglicht es Ihnen, verschiedene Formen wie Rechtecke, Ovale, Kreise, Quadrate und mehr zu erstellen. Die Form, die hauptsächlich in Webanwendungen vorkommt, ist jedoch die Kreisform. Weil es einfach zu machen und für Designzwecke weit verbreitet ist.

Wenn Sie eine Website entwerfen, sehen Sie Halbkreise anstelle von Kreisen besser aus. Darüber hinaus ist die Bildung von Halbkreisen sowohl einfach als auch interessant.

In diesem Artikel geben wir eine Anleitung zum Erstellen eines Semi-Kreises mit CSS.

So erstellen Sie einen Semi -Kreis mit CSS?

Um einen Halbkreis zu machen, werden wir die „verwenden“Grenzradius" Eigentum. Diese Eigenschaft hilft uns, auf folgende Weise einen Semi-Kreis zu erstellen:

• Semi -Kreis von oben
• Semi -Kreis von unten
• Semi -Kreis von links
• Halbkreis von rechts

Lassen Sie uns jeweils auf jeden einzeln ausgehen!

Beispiel 1: Erstellen Sie einen Semi -Kreis von oben mit CSS

Um einen Halbkreis von oben zu erstellen, werden wir zunächst die “angeben“Element im Körper Tag unserer HTML -Datei.

Html

Stellen Sie nun die geeigneten Abmessungen für die DIV ein, wie wir die “zuweisen werden“Breite"Eigenschaftswert als"180px" Und "Höhe”Eigenschaft mit Wert“90px”. Stellen Sie im nächsten Schritt die "Grenzradius" Eigentumswert "12rem 12rem 0 0”; Wenn der erste Ziffer 12Rem die obere linke Seite des DIV abschneidet. Zuletzt verwenden Sie die Farbe, um den Kreis eine Farbe zu verleihen, die “Hintergrundfarbe”Eigenschaft mit dem Wert“lila”.

CSS

div
Breite: 180px;
Höhe: 90px;
Border-Radius: 12rem 12rem 0 0;
Hintergrundfarbe: lila;

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 Semi-Kreis mit CSS Border-Radius-Eigentum erstellt.

Beispiel 2: Erstellen Sie einen Semi -Kreis von unten mit CSS

Für die Bildung eines Halbkreises von unten setzen wir Grenzwerte als “als“0 0 12rem 12rem”, Wobei die ersten beiden Werte die obere linke und obere rechte Grenzradius darstellen. Wir haben sie auf 0 gesetzt, um die obere Hälfte des DIV vollständig verschwinden zu lassen. Für den Boden haben wir nur etwas links und unten rechts geschnitten, indem wir die Werte auf 12Rem eingestellt haben.

CSS

div
Breite: 180px;
Höhe: 90px;
Border-Radius: 0 0 12rem 12rem;
Hintergrundfarbe: lila;

Ausgang

Beispiel 3: Erstellen Sie einen Semi -Kreis von rechts mit CSS

Um ein CSS-Halbkreis nach rechts zu erstellen, stellen Sie zunächst die Höhe und Breite des Behälters ein, da es notwendig ist, um die richtige Form des Kreises zu erhalten. Setzen Sie die “Breite" als "90px" Und "Höhe" als "180px" diesmal. Nutze das grenzwertige Eigentum mit dem Wert erneut “0 12rem 12rem 0”, Wobei der erste Wert 0 für die obere linke Seite liegt, ist der letzte Wert 0 für die untere linke Seite und die zweiten und dritten Werte werden hinzugefügt, um die obere rechte und rechte Seite zu schneiden. Das Anwenden dieser Werte bildet von rechts einen Halbkreis.

CSS

div
Breite: 90px;
Höhe: 180px;
Border-Radius: 0 12rem 12rem 0;
Hintergrundfarbe: lila;

Ausgang

Beispiel 4: Erstellen Sie einen Semi -Kreis von links mit CSS

Geben Sie diesmal das Rand-Radius-Eigentum entlang des Wertes an “12rem 0 0 12rem”; Der erste und der letzte Wert 12REM wird die obere linke und unten linke Seite des DIV abschneiden und den zweiten und den dritten Wert auf 0 einstellen. Schließlich wird unser linksseitiger Halbkreis erstellt.

CSS

div
Breite: 90px;
Höhe: 180px;
Border-Radius: 12rem 0 0 12rem;
Hintergrundfarbe: lila;

Ausgang

Wir haben verschiedene Methoden zum Erstellen eines Semi-Kreises mit CSS angeboten.

Abschluss

Um einen Halbkreis zu erstellen, können wir einfach die CSS verwenden. “Grenzradius" Eigentum. Der Halbkreis kann von Seite zu Seite erstellt werden, wie links, rechts, oben und unten. In der Eigenschaft Grenzradius liegt der Anfangswert für die obere links, der zweite für die obere rechts, der dritte ist für die untere rechte und der vierte Wert für die untere linke Seite links. In diesem Artikel wurde erklärt, wie man einen Semi-Kreis mit CSS erstellt.