当前位置：首页 > CSS

css制作扇形图

2026-02-12 14:52:36CSS

使用CSS制作扇形图

利用`conic-gradient`实现基础扇形

通过CSS的conic-gradient可以快速创建扇形效果。定义一个圆形元素并应用角度渐变色：

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #FF6384 0% 30%, 
    #36A2EB 30% 70%,
    #FFCE56 70% 100%
  );
}

其中百分比值控制各扇区的角度范围，颜色值可自定义。

通过`transform`和`clip-path`创建单个扇区

需要单独控制某个扇区时，可组合使用旋转和裁剪：

.sector {
  width: 100px;
  height: 100px;
  background: #4CAF50;
  border-radius: 100% 0 0 0;
  transform-origin: right bottom;
  transform: rotate(45deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

调整rotate()角度和clip-path形状可改变扇区大小。

使用伪元素构建半圆扇区

通过::before或::after创建半圆效果：

.half-circle {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.half-circle::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #3498db;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

SVG与CSS结合方案

更精确的控制可以使用内联SVG配合CSS样式：

<svg viewBox="0 0 100 100" class="svg-pie">
  <path d="M50 50 L50 0 A50 50 0 0 1 100 50 Z" fill="#e74c3c"/>
</svg>

通过修改SVG路径的d属性和CSS填充色实现动态效果。

动画效果实现

为扇形添加旋转动画增强交互性：

css制作扇形图

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animated-sector {
  animation: spin 3s linear infinite;
}

关键点在于合理组合CSS的图形处理属性，现代浏览器对conic-gradient的支持已较完善，但需要针对旧版本浏览器提供降级方案。动态数据展示建议结合JavaScript实时计算角度值。