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。