HTML CSS圆形片段不相等

我正在尝试创建一个有8段45度大小的彩虹圆

您会注意到橙色部分的大小是其他部分的两倍。我想这是1号和8号。然而，我不知道如何将它们分开。我的学位错了吗

谢谢你的帮助

身体{ 溢出：隐藏； } .馅饼{ 位置：相对位置； 保证金：1em自动； 边框：虚线1px； 填充：0； 宽度：32em； 高度：32em； 边界半径：50%； 列表样式：无； } .1{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转-22.5度倾斜0度； } .2{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转22.5度偏斜0度； } .3{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转67.5度倾斜0度； } .4{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转12.5度倾斜0度； } .5{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转157.5度倾斜0度； } .6{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转202.5度偏斜0度； } .7{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转247.5度偏斜0度； } .8{ 溢出：隐藏； /**/ 位置：绝对位置； 排名：0； 右：0； 宽度：50%； 身高：50%； 变换原点：0%100%； 变换：旋转-67.5度倾斜0度； } .切片内容1{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：FF4D； 文本对齐：居中； 过渡：背景色。5s； } .切片内容2{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：9AC147； 文本对齐：居中； 过渡：背景色。5s； } .slice-contents3{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：639b47； 文本对齐：居中； 过渡：背景色。5s； } .切片内容4{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：3869c3； 文本对齐：居中； 过渡：背景色。5s； } .切片内容5{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：1e3868； 文本对齐：居中； 过渡：背景色。5s； } .切片内容6{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：c682bb； 文本对齐：居中； 过渡：背景色。5s； } .切片内容7{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：9a1d34； 文本对齐：居中； 过渡：背景色。5s； } .切片内容8{ 位置：绝对位置； 左-100%； 宽度：200%； 身高：200%； 边界半径：50%； 背景：f7941e； 文本对齐：居中； 过渡：背景色。5s； } .切片1.切片2.切片3.切片4.切片5.切片6.切片7.切片8.切片内容1.切片内容2.切片内容3.切片内容4.切片内容5.切片内容6.切片内容7.切片内容8{ 变换：倾斜40度旋转25度； } .slice-contents1：悬停{ 背景：FF1A； } .slice-contents2：悬停{ 背景：8db23c； } .slice-contents3：悬停{ 背景：588a3f； } .slice-contents 4：悬停{ 背景：2d549b； } .切片内容5：悬停{ 背景：132340； } .切片内容6：悬停{ 背景：ad4f9e； } .slice-contents7：悬停{ 背景：85192d； } .slice-contents8：悬停{ 背景：f38809； }

---

哦，这很明显。。。你使用的是正方形元素，并以不同的角度旋转它，从而得到圆周率

根据您的设计，每个li div将为90度，而每个li div的45度将被其他元素隐藏

对于每个元素，切片7将正常工作，但角度为90的切片8将覆盖黄色元素

以你的小提琴为例，你会注意到只有你的橙色元素切片8呈90度角，其余部分都很好，除了黄色切片1隐藏在切片8内

要解决这个问题，你应该减小弧度，使其适合

对以下内容进行更改..您的馅饼将继续

.slice-contents8 {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;

text-align: center;
transition: background-color .5s;
background-image: linear-gradient(135deg, transparent 50%, #f7941e 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.slice8 {
overflow: hidden; /**/
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%; 
transform: rotate(-112.5deg); 
}

请参阅下面的演示

---

试试看，或者在ab中的firefox中看起来不错

---

爱codepen@TIMINeutron我用的是铬，橙色的部分是90度。你所有的切片都是90度，但与其他部分重叠。橙色的似乎在顶部。与上面相同的问题是悬停不起作用。另外，当我将html上的更改为标签时，它们都被以下切片覆盖。将其更改为标签将创建许多新问题，您需要做什么，因为如果你要创建饼图，它不是将标签放在弧内的方法…或者你可以创建单独的传奇因为我们正在解决你的需要，而我在其中创建饼图标签，我将使用其他方法。我会找到另一种标签方法：仍然尝试让红色部分高亮显示