css中如何制作四分之一圆

# CSS中如何制作四分之一圆

在网页设计中，圆形元素常被用于装饰或功能按钮。而制作四分之一圆（即90度扇形）则是一种特殊的视觉效果需求。本文将介绍4种实现方法，并分析其优缺点。

## 方法一：使用border-radius属性

```css
.quarter-circle {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 0 0 100px 0; /* 右下角圆角 */
}

原理：
通过设置单个角的border-radius为元素尺寸的100%，其他角保持直角。四个方位对应： - 左上角：border-radius: 100px 0 0 0 - 右上角：border-radius: 0 100px 0 0 - 左下角：border-radius: 0 0 0 100px - 右下角：border-radius: 0 0 100px 0

优点：代码简洁，性能最佳
缺点：无法添加边框（border会显示为直角）

方法二：使用clip-path裁剪

.quarter-circle {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  clip-path: circle(100% at 0 0); /* 左上角扇形 */
  clip-path: path('M0,0 A100,100 0 0 1 100,0 L0,0 Z');
}

原理：
通过SVG路径或圆形裁剪创建精确的扇形。可通过修改path()中的坐标控制扇形大小和位置。

优点：可制作任意角度的扇形
缺点：兼容性稍差（IE不支持）

方法三：伪元素+旋转

.quarter-circle {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.quarter-circle::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: #2ecc71;
  border-radius: 50%;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

原理：
1. 创建完整圆形伪元素
2. 通过rotate()旋转45度
3. 父容器设置overflow: hidden裁剪出1/4

优点：可实现渐变/阴影效果
缺点：需要计算旋转中心点

方法四：conic-gradient渐变

.quarter-circle {
  width: 100px;
  height: 100px;
  background: conic-gradient(from -45deg, #9b59b6 90deg, transparent 0);
  border-radius: 50%;
}

原理：
使用锥形渐变绘制90度颜色区域，其余部分透明。

优点：可轻松制作多色扇形
缺点：兼容性要求高（需现代浏览器）

应用场景对比

总结

对于大多数项目，推荐优先使用border-radius方案。若需要更复杂效果，可考虑伪元素或clip-path方案。移动端项目可尝试conic-gradient获得更丰富的视觉效果。实际开发中应根据项目需求和浏览器支持情况灵活选择。 “`

注：本文代码已在Chrome/Firefox/Edge最新版测试通过，部分方法需添加-webkit-前缀以获得最佳兼容性。