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 方法在所有浏览器中都支持，且可以制作更复杂的扇形
• 渐变方法适合简单的扇形，但控制角度需要精确计算

这些方法都可以根据实际需求调整大小、颜色和角度来创建不同样式的扇形效果。