html - 带线段的 CSS 半圆

Question

我正在尝试创建一个有 5 个线段的半圆，如下图所示，我可以在其中轻松调整各个线段之间的间距以及线段本身的大小。

CSS 半圆示例

我是前端开发的新手，但我尝试了几种资源，以便在来这里之前自己解决这个问题:

1. > Building a Circular Navigation with CSS Transforms
2. > Segments in a circle using CSS3
3. 大量 codepen 笔。

我需要一个简单而纯粹的 CSS 解决方案的帮助，该解决方案不涉及通过混合或滚动 SVG 解决方案来处理大量数学问题。

如有任何帮助，我们将不胜感激……我已经在这里工作了 3 天，这几乎是最后的手段。

Answer 1

因此，我从之前的回答中提取了这个内容并对其进行了一些修改以使其成为正确的形状。

由于 CSS 的局限性，如果不使用 SVG 之类的东西，每个段之间的间距将很困难。

它并不完美，仅靠纯 CSS 很难使它完美。

.wheel,
.umbrella,
.color {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 15em;
  height: 15em;
  margin: 0;
  padding: 0;
}
.wheel {
  overflow: hidden;
  width: 15em;
  height: 15em;
  position: relative;
  border: 1px solid black;
  transform: rotate(270deg);
  padding: 3px;
}
.umbrella {
  position: relative;
  -webkit-transform: scale(1.35);
  margin: 3px;
  padding: 5px;
}
.color,
.color:nth-child(n+7):after {
  clip: rect(0, 15em, 15em, 7.5em);
}
.color:after,
.color:nth-child(n+7) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 7.5em);
  top: calc(50% - 7.5em);
  width: 15em;
  height: 15em;
  clip: rect(0, 7.5em, 15em, 0);
}
.color:nth-child(1):after {
  background-color: #9ED110;
  transform: rotate(30deg);
  z-index: 12;
}
.color:nth-child(2):after {
  background-color: #50B517;
  transform: rotate(60deg);
  z-index: 11;
}
.color:nth-child(3):after {
  background-color: #179067;
  transform: rotate(90deg);
  z-index: 10;
}
.color:nth-child(4):after {
  background-color: #476EAF;
  transform: rotate(120deg);
  z-index: 9;
}
.color:nth-child(5):after {
  background-color: #9f49ac;
  transform: rotate(150deg);
  z-index: 8;
}
.color:nth-child(6):after {
  background-color: #CC42A2;
  transform: rotate(180deg);
  z-index: 7;
}

<div class="wheel">
  <ul class="umbrella">
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
    <li class="color"></li>
  </ul>
</div>

---

另一种方法是制作单个 SVG 形状，然后在 CSS 中将其引用为剪辑路径。上面的代码几乎完全相同，只是形状的生成方式发生了变化。