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>