当前位置：首页 > CSS

css 制作扇形

2026-01-28 09:53:54CSS

使用 CSS 制作扇形的方法

方法一：利用 `border-radius` 和 `clip-path`

通过设置 border-radius 和 clip-path 属性可以创建扇形效果。这种方法适用于现代浏览器。

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

clip-path 的 polygon 函数通过定义三个点来裁剪出一个扇形区域。第一个点是圆心，第二个和第三个点是扇形的两个边缘点。

方法二：使用 `conic-gradient`

conic-gradient 可以创建圆锥渐变，适合制作扇形。

.fan-shape {
  width: 200px;
  height: 200px;
  background: conic-gradient(#ff6b6b 0deg, #ff6b6b 90deg, transparent 90deg);
  border-radius: 50%;
}

这里的 conic-gradient 从 0 度到 90 度填充颜色，其余部分透明，形成一个 90 度的扇形。

方法三：利用 `transform` 和伪元素

通过旋转伪元素来创建扇形效果。

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

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

transform-origin 设置为左上角，rotate 旋转伪元素形成扇形。

方法四：使用 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="#ff6b6b" />
</svg>

SVG 的 path 元素通过 d 属性定义扇形路径，A 命令用于绘制圆弧。

方法五：利用 `clip-path` 和 `circle`

结合 clip-path 和 circle 可以创建扇形。

.fan-shape {
  width: 200px;
  height: 200px;
  background-color: #ff6b6b;
  clip-path: circle(100px at 100px 100px);
  mask: radial-gradient(transparent 50%, #000 50%);
}

mask 属性用于裁剪出扇形区域，radial-gradient 定义透明和实色部分。