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变量配合正确。
