在CSS中繪製半圈

Question

如何在CSS中繪製半個像這樣的圖像的圓圈。

並僅使用CSS定義。沒有SVG，WebGL，DirectX允許。

Answer 1

像這樣的東西可能會工作：

.box { 
 
    width: 604px; 
 
    border-width: 0 1px 1px; 
 
    border-color: #ddd; 
 
    border-style: solid; 
 
    overflow: hidden; 
 
} 
 
.circles { 
 
    border-top: 1px solid #ddd; 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
.circles li { 
 
    background-color: white; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    border-width: 0 1px 1px; 
 
    border-color: #ddd; 
 
    border-style: solid; 
 
    margin: 0 17px; 
 
    position: relative; 
 
    transform: translateY(-50%); 
 
}

<div class="box"> 
 
    <ul class="circles"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
    Circles for the win 
 
    
 
</div>