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

如何解决将圆分成3个部分，每个扇区内有垂直文本

我需要使用CSS（没有JS或SVG）绘制此形状：

在以下情况下：

• 文本应该在一个位置上-绝对垂直。
• 这就像一个被分成三个部分的无外部边界的圆形。
• 中心应为空（可选）。

我尝试过的操作：fiddle。但是它旋转文本。 另外，我尝试将rotate与translateY属性一起使用，但它会压缩文本：

解决方法

尝试在：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>