css 制作扇形
使用 CSS 制作扇形
通过 CSS 的 clip-path 属性可以轻松实现扇形效果。以下是一个简单的示例代码：
.fan-shape {
width: 200px;
height: 200px;
background-color: #f00;
clip-path: circle(100px at 100px 100px);
transform: rotate(45deg);
}使用 CSS 渐变制作扇形
另一种方法是使用 CSS 的渐变和旋转：
.fan-shape {
width: 200px;
height: 200px;
background: conic-gradient(#f00 0deg, #f00 90deg, transparent 90deg);
border-radius: 50%;
}使用 SVG 制作扇形
SVG 提供了更精确的控制方式：
<svg width="200" height="200" viewBox="0 0 200 200">
<path d="M100,100 L200,100 A100,100 0 0,1 100,0 Z" fill="#f00"/>
</svg>使用 CSS 伪元素
通过伪元素和旋转可以创建扇形：
.fan-shape {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.fan-shape::before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: #f00;
transform: rotate(45deg);
transform-origin: 100px 100px;
}注意事项
clip-path属性在现代浏览器中支持良好，但在旧版浏览器中可能需要前缀- SVG 方法在所有浏览器中都支持，且可以制作更复杂的扇形
- 渐变方法适合简单的扇形，但控制角度需要精确计算
这些方法都可以根据实际需求调整大小、颜色和角度来创建不同样式的扇形效果。
