如何在纯 CSS 饼图中添加切片之间的间距？

向纯 CSS 饼图切片添加间距：实用的解决方案

使用纯 CSS 技术呈现的饼图为可视化数据提供了优雅的解决方案。然而，切片之间没有间距会降低图表的有效性。要解决此问题并创建与所提供的图像类似的饼图，请按照以下步骤操作：

第 1 步：删除不必要的 Clip-Path

原始代码广泛使用了 Clip-Path，其中引入了不必要的复杂性。相反，创建一个围绕绝对定位和边框半径的简化结构。

第 2 步：创建容器 Div

建立一个容器 div，将所有切片集中放置，同时使用隐藏任何溢出区域溢出：隐藏。

第 3 步：绝对定位切片

在容器，绝对定位每个切片并将其扩展以占据整个可用空间。利用边框半径，确保切片呈现圆形。

第 4 步：定义边框宽度和颜色

对于每个切片，使用 border 属性定义边框宽度和颜色。利用自定义 CSS 变量（例如 --c）来简化边框颜色的修改。

第 5 步：旋转切片

对每个切片应用 Transform:rotate() 以使它们正确对齐周长。

示例代码

实现以下代码来创建纯 CSS 饼图切片之间有间距：

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

使用此代码，您现在可以创建一个具有视觉吸引力的纯 CSS 饼图，切片之间有清晰的间距。

以上是如何在纯 CSS 饼图中添加切片之间的间距？的详细内容。更多信息请关注PHP中文网其他相关文章！