css 制作扇形
使用 CSS 制作扇形
通过 CSS 的 border-radius 和 clip-path 属性可以轻松实现扇形效果。以下是几种常见方法：
使用 border-radius 和 transform
通过设置元素的 border-radius 为 50% 将其变为圆形，再利用 transform 旋转部分区域显示为扇形。
.fan-shape {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff5722;
transform: rotate(0deg) skew(30deg);
}使用 clip-path 属性
clip-path 是更灵活的方式，可以直接定义扇形的路径。
.fan-shape {
width: 100px;
height: 100px;
background: #ff5722;
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}使用 conic-gradient
通过锥形渐变 (conic-gradient) 可以创建多色扇形或单色扇形的一部分。
.fan-shape {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#ff5722 0deg, #ff5722 90deg, transparent 90deg);
}使用 SVG 嵌入
SVG 的 <path> 或 <circle> 元素可以精确控制扇形角度和大小。
<svg width="100" height="100" viewBox="0 0 100 100">
<path d="M50,50 L100,50 A50,50 0 0,1 30,90 Z" fill="#ff5722" />
</svg>注意事项
clip-path的兼容性较好，但部分旧浏览器可能需要前缀。conic-gradient适合现代浏览器，适合需要渐变色的场景。- SVG 方案兼容性最佳，适合复杂扇形或动态调整需求。
根据项目需求选择合适的方法，现代 CSS 方案推荐优先使用 clip-path 或 conic-gradient。
