css制作扇形图

使用CSS制作扇形图

方法一：使用clip-path和transform

通过CSS的clip-path和transform属性可以快速实现扇形效果。定义一个圆形元素，然后裁剪出扇形部分。

.fan-shape {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
  transform: rotate(30deg); /* 调整旋转角度控制扇形位置 */
}

方法二：使用conic-gradient

conic-gradient可以创建锥形渐变，非常适合制作扇形图。通过定义颜色起点和终点实现扇形效果。

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #e74c3c 0deg 90deg,
    #3498db 90deg 180deg,
    #2ecc71 180deg 270deg,
    #f1c40f 270deg 360deg
  );
}

方法三：利用伪元素和旋转

通过伪元素和旋转实现扇形。定义一个圆形，用伪元素覆盖部分区域并旋转。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #e74c3c;
  position: relative;
  overflow: hidden;
}

.circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3498db;
  transform-origin: 100% 50%;
  transform: rotate(90deg); /* 调整角度控制扇形大小 */
}

方法四：SVG结合CSS

使用SVG的path或circle元素结合CSS样式实现更复杂的扇形效果。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,100 L200,100 A100,100 0 0,1 150,150 Z" fill="#e74c3c" />
</svg>

方法五：CSS变量动态控制扇形角度

通过CSS变量动态调整扇形角度，适合需要交互的场景。

.fan-dynamic {
  --angle: 90deg;
  width: 200px;
  height: 200px;
  background: conic-gradient(#3498db 0deg var(--angle), transparent var(--angle) 360deg);
  border-radius: 50%;
}

document.querySelector('.fan-dynamic').style.setProperty('--angle', '120deg');

注意事项

• 使用clip-path时注意浏览器兼容性。
• conic-gradient在旧版浏览器中可能需要前缀或替代方案。
• 动态调整扇形角度时，确保JavaScript与CSS变量配合正确。