仅CSS饼图-如何在切片之间添加间距/填充？

我已经构建了一个仅CSS的饼图，但我需要在每个片之间添加空间，就像它是一个边框一样。我试图给每个切片添加一个边框，但实际上不起作用

如何使这个CSS饼图看起来更像下图

这是我的密码：

调色板{
高度：48px；
宽度：48px；
}
.palette.colorOuter1，
.palette.colorOuter2，
.palette.colorOuter3，
.调色板.彩色外套4，
.palette.colorOuter5{
高度：200px；
宽度：200px；
边界半径：50%；
位置：绝对位置；
排名：0；
左：0；
剪辑：rect（0px，200px，200px，100px）；
}
.palette.colorOuter1{
剪辑：自动；
背景：#eee；
}
.palette.colorOuter2{
变换：旋转（0度）；
}
.palette.colorOuter2{
变换：旋转（72度）；
}
.palette.colorOuter3{
变换：旋转（144度）；
}
.palette.colorOuter4{
变换：旋转（216度）；
}
.palette.colorOuter5{
变换：旋转（288度）；
}
.palette.colorInner1，
.palette.colorInner2，
.palette.colorInner3，
.palette.colorInner4，
.palette.colorInner5{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：200px；
边界半径：50%；
变换：旋转（72度）；
}
.palette.colorInner1{
背景#5D5E63；
剪辑：rect（0px，100px，200px，0px）；
}
.palette.colorInner2{
背景色：#AEADA9；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.colorInner3{
背景色：#D5C4A8；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.colorInner4{
背景色：#AA875F；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.colorInner5{
背景色：#B7CBC7；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.centerOverlay{
位置：绝对位置；
边界半径：50%；
顶部：60px；
左：60px；
背景：#fff；
宽度：80px；
高度：80px；
显示：块；
剪辑：自动；
}

---

您通过CSS旋转和剪裁实现饼图的方式使您无法真正知道“边框”的实际位置，我认为您无法使用

边框

或

剪裁路径

在这里提供太多帮助（可能

剪裁路径

和多边形，对我来说太难了！）

您可以在

.centerOverlay

中放置更多的

div

，以充当更多的剪裁遮罩，然后将其定位，使其中点位于精确的中心，旋转和平移（这不是很有趣，而是很有趣）。我在这里举了两个例子：

调色板{
高度：48px；
宽度：48px；
位置：相对位置；
}
.palette.colorOuter1，
.palette.colorOuter2，
.palette.colorOuter3，
.调色板.彩色外套4，
.palette.colorOuter5{
高度：200px；
宽度：200px；
边界半径：50%；
位置：绝对位置；
排名：0；
左：0；
剪辑：rect（0px，200px，200px，100px）；
}
.palette.colorOuter1{
剪辑：自动；
背景：#eee；
}
.palette.colorOuter2{
变换：旋转（0度）；
}
.palette.colorOuter2{
变换：旋转（72度）；
}
.palette.colorOuter3{
变换：旋转（144度）；
}
.palette.colorOuter4{
变换：旋转（216度）；
}
.palette.colorOuter5{
变换：旋转（288度）；
}
.palette.colorInner1，
.palette.colorInner2，
.palette.colorInner3，
.palette.colorInner4，
.palette.colorInner5{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：200px；
边界半径：50%；
变换：旋转（72度）；
}
.palette.colorInner1{
背景#5D5E63；
剪辑：rect（0px，100px，200px，0px）；
}
.palette.colorInner2{
背景色：#AEADA9；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.colorInner3{
背景色：#D5C4A8；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.colorInner4{
背景色：#AA875F；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.colorInner5{
背景色：#B7CBC7；
剪辑：rect（0px，100px，100px，0px）；
}
.palette.centerOverlay{
位置：绝对位置；
边界半径：50%；
顶部：60px；
左：60px；
背景：#fff；
宽度：80px；
高度：80px；
显示：块；
剪辑：自动；
}
.调色板，北{
位置：绝对位置；
顶部：-60px；
左：50%；
背景色：白色；
宽度：4px；
高度：100px；
}
.调色板.东北{
位置：绝对位置；
顶部：-10px；
左：50%；
背景色：白色；
宽度：4px；
高度：100px；
变换：旋转（72度）平移（0px，-50px）
}

---

首先，我将使用较少的代码重新创建此文件，这些代码依赖于

剪辑路径，如下所示：


调色板{
高度：200px；
宽度：200px；
位置：相对位置；
溢出：隐藏；
}
.palette>*{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边框：50px固态变量（--c，红色）；
边界半径：50%；
剪辑路径：多边形（50%50%，50%0%，100%0%，100%33.745%）；
}
.color1{
变换：旋转（72度）；
--c:蓝色；
}
.color2{
变换：旋转（144度）；
--c:橙色；
}
.color3{
变换：旋转（-72度）；
--c:绿色；
}
.color4{
变换：旋转（-144度）；
--c:紫色；
}

真棒的答案！我在这里看到的唯一潜在问题是，
clip path
似乎不支持IE 11@是的，我运气不好：）我可能会找到另一个把戏；）您是否偶然发现了另一种解决IE问题的方法？@stwhite我尝试了几次，但很难维持。我想你最好的办法是考虑SVG，如果你想处理IE11，一个纯粹的CSS将是一个痛苦。@斯塔怀特，如果你仍然在职，我在伊江找到了一个方法。检查最后一个代码