带有细分的

Question

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

CSS半圆示例

我在前端开发方面非常注重新手，但我尝试了几种资源，以便在来到这里之前自己解决这个问题：

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

我需要一个简单而纯粹的CSS解决方案的帮助，该解决方案不涉及通过mixins或滚动SVG解决方案来处理疯狂的数学运算。

任何帮助将不胜感激......我已经在这3天了，这几乎是最后的手段。

Answer 1

所以，我从之前的回答中得到了这一点并对其进行了一些修改以使其成为正确的形状。

由于CSS具有限制，因此在不使用SVG之类的情况下，每个段之间的间距将很难。

它并不完美，只用纯CSS就很难完美。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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