css扇面制作

使用CSS制作扇面效果

扇面效果可以通过CSS的transform和rotate属性实现，结合伪元素或子元素创建多个扇形区域。以下是两种常见实现方法：

基础扇形制作（单色）

通过clip-path和transform裁剪圆形的一部分形成扇形：

.fan {
  width: 200px;
  height: 200px;
  background: #ff6b6b;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

多色扇形组合

使用多个子元素旋转叠加形成完整扇面：

<div class="fan-container">
  <div class="sector" style="--i:0"></div>
  <div class="sector" style="--i:1"></div>
  <div class="sector" style="--i:2"></div>
</div>

.fan-container {
  width: 200px;
  height: 200px;
  position: relative;
}

.sector {
  position: absolute;
  width: 100%;
  height: 100%;
  background: hsl(calc(var(--i) * 120), 70%, 60%);
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform: rotate(calc(var(--i) * 120deg));
  transform-origin: left center;
}

动画扇面

添加CSS动画实现旋转效果：

.fan-animate {
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

参数说明

1. 角度控制：调整clip-path的坐标点可改变扇形角度
2. 颜色控制：使用HSL色彩模式方便生成渐变色系
3. 尺寸控制：通过修改容器宽高适应不同需求

实际应用中可结合JavaScript动态生成扇形数量及角度，实现数据可视化等复杂效果。