css制作扇形

使用 CSS 制作扇形

CSS 可以通过 border-radius 和 clip-path 属性实现扇形效果。以下是几种常见方法：

使用 border-radius 和 transform

通过设置 border-radius 为 50% 并旋转元素，可以模拟扇形效果。

.fan-shape {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ff6b6b;
  clip-path: polygon(50% 50%, 50% 0, 0 0);
}

使用 clip-path 和 polygon

clip-path 可以直接定义扇形的路径，更灵活。

.fan-shape {
  width: 100px;
  height: 100px;
  background: #ff6b6b;
  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(#ff6b6b 0deg, #ff6b6b 90deg, transparent 90deg);
}

使用伪元素

通过旋转伪元素实现扇形效果。

.fan-shape {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.fan-shape::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ff6b6b;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

注意事项

• clip-path 的兼容性较好，但旧版本浏览器可能需要前缀。
• conic-gradient 在现代浏览器中支持良好，但不适用于旧版浏览器。
• 伪元素方法需要调整 transform-origin 以控制扇形的起始点。