相关疑难解决方法(0)

CSS Only Pie Chart - 如何在切片之间添加间距/填充？

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

关于如何使这个 CSS 饼图看起来更像下图的任何想法？

这是我的代码：

.palette {
  height: 48px;
  width: 48px;
}
.palette .colorOuter1,
.palette .colorOuter2,
.palette .colorOuter3,
.palette .colorOuter4,
.palette .colorOuter5 {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(0px, 200px, 200px, 100px);
}
.palette .colorOuter1 {
  clip: auto;
  background: #eee;
}
.palette .colorOuter2 {
  transform: rotate(0deg);
}
.palette .colorOuter2 {
  transform: rotate(72deg);
}
.palette .colorOuter3 {
  transform: rotate(144deg);
}
.palette .colorOuter4 {
  transform: rotate(216deg);
}
.palette .colorOuter5 {
  transform: rotate(288deg); …

Run Code Online (Sandbox Code Playgroud)

css pie-chart css-shapes

stw*_*ite

2021 02-04

6
推荐指数

1
解决办法

1631
查看次数