在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>