带半圆CSS的半圆一个元素

Question

我正在尝试创建一个具有完整圆形边界的半圆形元素。像这样：

使用2个元素可以做到这一点，但是我不完全理解如何在一个DIV中完成它。

现在我只有一个半圈：

.element {
  height: 10px;
  width: 10px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  background-color: #00a680;
}

Answer 1

您可以简单地使用渐变：

.box {
  width: 150px;
  height: 150px;
  border: 15px solid #00a680;
  border-radius: 50%;
  padding: 15px;
  background: linear-gradient(to right, #00a680 50%, transparent 0) content-box;
  box-sizing:border-box;
}

<div class="box">
</div>