html - 创建一个圆圈，每个边框都有自己的文字？

Question

注意：我没有使用任何 SVG。

我有一个圆圈，每个边框都有自己的文字和颜色。

注意：我没有使用任何插件。它只是一个带有文本的静态圆圈。

可以使用 HTML 和 CSS 来实现吗？如果是，那么请给我一些打击，从哪里开始。

.circle-donut{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-top: 140px solid #52e291;
  border-bottom: 140px solid #3400fe;
  border-right: 140px solid #ff7d36;
  border-left: 140px solid #faff08;
}

<div class="circle-donut"></div>

带绝对位置

.wrap {
  position: relative;
}

.circle-donut {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-top: 140px solid #a3fe01;
  border-bottom: 140px solid #2800eb;
  border-right: 140px solid #dd6479;
  border-left: 140px solid #ead52c;
}

ul {
  position: relative;
}

ul li {
  position: absolute;
}

ul li.top {
  top: 0;
}

ul li.bottom {
  bottom: 0;
}

ul li.left {
  left: 0;
}

ul li.right {
  right: 0;
}

<div class="wrap">
  <div class="circle-donut">

  </div>

  <ul>
    <li class="top">Come content one</li>
    <li class="right">Come content Two</li>
    <li class="bottom">Come content Three</li>
    <li class="left">Come content Four</li>
  </ul>
</div>

标签： htmlcss