div: eine halbkreisförmige Scheibe machen

Question

Ich versuche eine halbkreisförmige Form aus einem div zu erstellen.

Hier ist was ich versucht habe.

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: gray; 
 
    border-top-right-radius:100%; 
 
    border-top-left-radius:100%; 
 
}

<div> 
 
</div>

Ich habe versucht, auch andere Kombinationen von 50% und 100%, alles umsonst.

Ich denke, es kann eine Kombination aus dem border-radius und seinen Varianten gemacht werden, aber ich bin nicht in der Lage, es herauszufinden.

P.S. Lassen Sie mich auch wissen, ob es mit dieser Methode nicht möglich ist und wie es sonst noch gemacht werden kann.

Answer 1

Der Umrandungsradius wird unter Verwendung eines Prozentsatzes der Breite/Höhe des Elements berechnet. Wenn das Browserfenster also nicht perfekt quadratisch ist, wird Ihr Umriss eher elliptisch als kreisförmig sein. Hier ist mein Vorschlag:

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
} 
 

 
div div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    border-radius: 50%; 
 
}

<div> 
 
    <div> 
 
    </div> 
 
</div>

Mit einem div nur (wie gewünscht):

div { 
 
    background: grey; 
 
    width: 100px; 
 
    height: 50px; 
 
    border-top-left-radius: 100px; 
 
    border-top-right-radius: 100px; 
 
}

<div></div>

Eine weitere Lösung (unter Verwendung von Pseudoelement):

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
} 
 

 
div::before { 
 
    content: ''; 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    border-radius: 50%; 
 
}

<div></div>

Eine weitere Lösung (mit einem div):

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: gray; 
 
    border-radius: 50% 50% 0 0/100% 100% 0 0; 
 
}

<div></div>