html - 半圆与全圆 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>