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

通過使用元素寬度/高度的百分比計算border-radius，所以除非瀏覽器窗口完全呈正方形，否則邊框會更加橢圓，而不是圓形。這裏是我的建議：

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>

還有一個解決方案（使用僞元素）：

（使用一個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>