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

在 CSS 中画半个圆

Drawing half a circle in CSS

html

css

draw

twitter-bootstrap