将圆分成 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>

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

Divide circle into 3 parts with vertical text inside each sector

html

css

sass

css-shapes