Wie erstelle ich mit CSS einen Halbkreis mit einem einzelnen Div?

Erstellen eines Halbkreises mit CSS

Frage:

Wie erstellt man einen Halbkreis nur mit CSS? mit einem einzigen div-Element und ohne auf externe Tools wie SVG oder Grafik-APIs angewiesen zu sein?

Antwort:

Das Erreichen eines Halbkreiseffekts mit CSS kann durch die Nutzung erreicht werden Grenzeigenschaften. Gehen Sie dazu folgendermaßen vor:

1. Verwenden Sie den Radius „border-top-left-radius“ und den Radius „border-top-right-radius“, um die Ecken des Felds basierend auf seiner Höhe und etwaigen hinzugefügten Rändern abzurunden. Zum Beispiel:

border-top-left-radius: 110px;  // Height + Border
border-top-right-radius: 110px; // Height + Border

2. Fügen Sie Ränder oben, rechts und links der Box hinzu. Setzen Sie „border-bottom“ auf Null, um den unteren Rand zu entfernen.

border: 10px solid gray;
border-bottom: 0;

Diese Kombination aus abgerundeten Ecken und Rändern erzeugt eine Halbkreisform.

Beispiel:

<code class="css">.half-circle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border: 10px solid gray;
    border-bottom: 0;
}</code>

Alternative Methode:

Ein alternativer Ansatz ist die Verwendung von box-sizing: border-box, das die Breite und Höhe der Box berechnet einschließlich Rändern und Polsterung. Auf diese Weise können Sie die Höhe genau auf die Hälfte der Breite festlegen:

<code class="css">.half-circle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    box-sizing: border-box;
}</code>

Beide Methoden können den gewünschten Halbkreiseffekt mit reinen CSS-Techniken erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Halbkreis mit einem einzelnen Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!