div：半円円板を作る

Question

divから半円形を作成しようとしています。

これは私が試したものです。

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

<div> 
 
</div>

私はまた、すべて無駄に、50%と100%の他の組み合わせを試してみました。

私はそれがborder-radiusとその亜種のいくつかの組み合わせかもしれないと思いますが、私はそれを理解することができません。

P.S.また、この方法では不可能かどうか、それ以外の方法を教えてください。

Answer 1

境界の半径は、要素の幅と高さのパーセンテージを使用して計算されるため、ブラウザウィンドウが完全に正方形でない限り、境界線は円形ではなく、より楕円形になります。ここに私の提案は次のとおりです。

のみ（要求されるように）DIV 1を使用して

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

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

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

：（擬似要素を使って）

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

<div></div>

もう一つの解決策：

（1つのDIVを使用して）

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

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

<div></div>

もう一つの解決策：ツルツルだった

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

<div></div>