Javascript 如何使用css创建这样的图形？

.donut图表块{
溢出：隐藏；
}
.油炸圈饼图{
位置：相对位置；
宽度：200px；
高度：200px；
保证金：2rem自动；
边界半径：100%
}
.甜甜圈图表.中间{
背景：#00ced1；
位置：绝对位置；
顶部：30px；
左：30px；
高度：140像素；
宽度：140px；
边界半径：70px；
}
.夹子{
边界半径：50%；
剪辑：rect（0px，200px，200px，100px）；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.项目{
边界半径：50%；
剪辑：rect（0px，100px，200px，0px）；
身高：100%；
位置：绝对位置；
宽度：100%；
字体系列：monospace；
字体大小：1.5rem；
}
#第一节{
变换：旋转（0度）；
高度：200px；
}
#第1节项目{
背景色：#2b9a9e；
变换：旋转（90度）；
}
#第2节{
变换：旋转（90度）；
}
#第2节项目{
背景色：黑色；
变换：旋转（50度）；
}
#第三节{
变换：旋转（140度）；
}
#第3节项目{
背景颜色：灰色；
变换：旋转（60度）；
}
#第四节{
变换：旋转（180度）；
}

---

我知道您想要制作一个图表，并为每个图表元素创建一个形状（带有动态值）。 我认为使用纯css几乎不可能做到这一点。

---

我建议使用类库

您可以使用普通css绘制圆形扇区，如中所述。但是使用SVG可能更容易

正文{
背景：深绿色；
}
.圆形扇区{
溢出：隐藏；
宽度：100px；
高度：50px；
变换原点：50%100%；
位置：绝对位置；
}
.圆圈{
页边空白：
宽度：100px；
高度：50px；
边界半径：50px 50px 0；
背景：白色；
变换原点：50%100%；
变换：旋转（60度）；
}
.中心{
宽度：50px；
高度：50px；
左边距：25px；
背景：深绿色；
边界半径：50%；
边缘顶部：25px；
变换：旋转（0度）；
位置：绝对位置；
}
.另一圈{
宽度：80px；
左边距：10px；
高度：40px；
边缘顶部：10px；
边界半径：40px 40px 0；
背景：黑色；
变换原点：50%100%；
变换：旋转（140度）；
}

我使用了transform:rotate（）；但它不起作用。请编辑问题并添加代码。因此，我们可以了解您的代码中出现了什么错误。你可以向这个@KuldipKoradia寻求帮助，你是对的。他应该提到嘿，我很忙。所以我没时间回复你。很抱歉。现在我添加了一些代码，请检查谢谢。@RiteshKhandekarI已经用你的创建了完整的圆，但我需要增加圆的大小。只需增加所有css类中的宽度、高度、边框半径和边距，即可缩放所有内容。如果你想增加单个扇区的半径，你必须增加该扇区的大小，但也要增加所有其他扇区的余量，如我的回答所示。这样你可以确保你的扇区仍然有相同的中心。我试过了，但它改变了所有形状的条，所以我不知道如何处理它