在CSS中绘制半个圆圈

Question

如何在CSS中像这个图像一样绘制半个圆圈。  

并仅使用CSS定义。没有SVG，WebGL，DirectX允许。

Answer 1

这样的事可能有用：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;