html - 将圆圈分成 3 个部分，每个扇区内都有垂直文本

Question

我需要使用 CSS(没有 JS 或 SVG)绘制这个形状:

在这些条件下:

文本应该在一个位置 - 绝对垂直。

它有点像一个圆圈，它被分成了 3 个部分，没有外边界。

中心应该是空的(可选)。

我试过的: fiddle .但它旋转文本。
另外，我尝试使用 rotate与 translateY属性，但它压缩文本:

Answer 1

尝试在 :after 伪元素而不是 li 上做边框和旋转
你可以翻译得到空的中心。
然后只是定位文本
像这样:

.circle {
  position: relative;
  padding: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}


li:after {
  content:"";
  overflow: hidden;
  position: absolute;
  top: -20%;
  right: -20%;
  width: 70%;
  height: 70%;
  transform-origin: 0% 100%;
  border-bottom: solid black 1px;
}

.text {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
}

li:first-child:after {
  transform: rotate(0deg) skewY(30deg) translate(5px);
}

li:first-child .text {
  top: 25%;
  left: 75%;
}

li:nth-child(2):after {
  transform: rotate(120deg) skewY(30deg) translate(5px);
}

li:nth-child(2) .text {
  top: 70%;
  left: 50%;
}

li:nth-child(3):after {
  transform: rotate(240deg) skewY(30deg) translate(5px);
}

li:nth-child(3) .text {
  top: 25%;
  left: 25%;
}

<ul class="circle">
  <li>
    <div class="text">1</div>
  </li>
  <li>
    <div class="text">2</div>
  </li>
  <li>
    <div class="text">3</div>
  </li>
</ul>