css制作圆环扇形
使用CSS制作圆环扇形
方法一：使用border-radius和clip-path
通过设置border-radius创建圆形，再利用clip-path裁剪出扇形效果。
.circle-sector {
width: 200px;
height: 200px;
border-radius: 50%;
background: #3498db;
clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
}调整clip-path的坐标点可以改变扇形角度，例如90度扇形的坐标点为(50% 50%, 50% 0, 100% 50%, 50% 50%)。
方法二：使用conic-gradient
现代CSS支持圆锥渐变，可直接创建扇形效果。
.conic-sector {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#3498db 0deg 90deg, transparent 90deg);
}通过调整角度值(如0deg 90deg)可控制扇形大小，添加多个颜色停止点可创建多色扇形。
方法三：伪元素旋转技术
利用伪元素和transform旋转创建精确角度的扇形。
.rotating-sector {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.rotating-sector::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #3498db;
transform-origin: left center;
transform: rotate(30deg);
}通过调整rotate角度值和transform-origin位置，可以控制扇形起始点和范围。
方法四：SVG内联方案
直接在HTML中嵌入SVG实现更复杂的扇形效果。
<div class="svg-sector">
<svg viewBox="0 0 100 100">
<path d="M50,50 L100,50 A50,50 0 0,1 75,93 Z" fill="#3498db"/>
</svg>
</div>SVG路径中的A命令定义弧线，参数分别表示半径、旋转、大弧标志、方向标志和终点坐标。
方法五：CSS变量控制
使用CSS变量实现动态角度调整。
:root {
--start-angle: 0deg;
--end-angle: 90deg;
}
.variable-sector {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#3498db var(--start-angle) var(--end-angle),
transparent var(--end-angle)
);
}通过JavaScript修改CSS变量值即可实时调整扇形角度。
注意事项
- 考虑浏览器兼容性，clip-path和conic-gradient在较新浏览器中支持较好
- 对于环形扇形(空心效果)，可叠加两个不同大小的圆形
- 动画效果可通过transition或@keyframes实现
- 精确控制角度时建议使用CSS计算函数如calc()
以上方法可根据具体需求选择，简单扇形推荐conic-gradient方案，复杂形状建议使用SVG。
