Рисование половины круга в 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>