如何用CSS巧妙绘制环形中的扇形图案？

在网页前端开发场景中，环形中的扇形图案是很多UI设计中会出现的元素，比如进度环、评分环、数据统计可视化等场景都会用到。通过CSS的相关属性组合，我们可以不依赖图片和SVG，纯代码实现这类图形，并且还能灵活调整扇形的角度、颜色、大小等参数。

实现原理基础

要绘制环形中的扇形，核心思路是先绘制一个完整的圆环，再通过裁剪或者遮罩的方式，只保留圆环上对应角度的部分，就能得到扇形效果。常用的CSS属性包括border-radius制作圆形、transform做旋转、clip-path做裁剪、conic-gradient圆锥渐变等。

方法一：使用conic-gradient实现

圆锥渐变conic-gradient可以直接按照角度绘制渐变效果，非常适合制作环形扇形的场景，实现起来比较简单，代码量少。

基础实现代码

/* 环形扇形容器 */
.sector-ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 圆锥渐变：0度到120度为蓝色，120度到360度为透明 */
  background: conic-gradient(#4a90e2 0deg 120deg, transparent 120deg 360deg);
  /* 内圈遮罩形成环形 */
  mask: radial-gradient(transparent 60px, #fff 61px);
  -webkit-mask: radial-gradient(transparent 60px, #fff 61px);
}

这段代码会生成一个外圈半径100px、内圈半径60px，角度为120度的蓝色扇形。如果要调整扇形的角度，只需要修改conic-gradient里的角度值即可，比如要改成90度，就把120deg改成90deg。

方法二：使用clip-path裁剪实现

clip-path属性可以裁剪元素的可视区域，我们可以先绘制一个完整的环形，再通过clip-path裁剪出对应角度的扇形部分。

实现步骤与代码

首先绘制环形，再使用clip-path的polygon或者circle结合角度裁剪，这里用polygon实现更灵活的角度控制：

/* 环形基础样式 */
.ring-base {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #4a90e2;
  position: relative;
}
/* 内圈遮罩形成环形 */
.ring-base::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 扇形裁剪：裁剪出0到120度的区域 */
.sector-clip {
  clip-path: polygon(50% 50%, 50% 0%, 93.3% 6.7%);
}

这里的polygon坐标中，93.3% 6.7%是120度角对应的圆环外圈上的点，计算方式是：x = 50% + 50% * cos(120deg)，y = 50% - 50% * sin(120deg)，可以根据需要调整角度计算对应坐标。

方法三：使用transform旋转叠加实现

这种方法是利用两个半圆旋转叠加，适合制作动态的扇形进度效果，兼容性也比较好，支持更多旧版本浏览器。

实现代码

.sector-rotate {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
/* 左半圆 */
.left-half {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background: #4a90e2;
  border-radius: 100px 0 0 100px;
  transform-origin: right center;
}
/* 右半圆 */
.right-half {
  position: absolute;
  width: 100px;
  height: 200px;
  right: 0;
  top: 0;
  background: #4a90e2;
  border-radius: 0 100px 100px 0;
  transform-origin: left center;
  transform: rotate(120deg);
}
/* 内圈遮罩 */
.sector-rotate::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

这种方法中，右半圆旋转的角度就是扇形的角度，比如要120度扇形就旋转120deg，要60度就旋转60deg，左半圆默认不旋转，当角度超过180度时，再旋转左半圆即可。

三种方法对比

注意事项

• 使用mask属性时，注意添加-webkit-前缀兼容webkit内核浏览器
• clip-path的兼容性需要提前确认，如果需要支持IE浏览器则不推荐使用
• 旋转叠加方法制作动态扇形时，可以配合CSS动画实现进度变化效果

实际开发中可以根据项目兼容性要求和具体需求选择合适的实现方式，优先选择代码简洁、维护成本低的方案。

CSS扇形绘制环形图案transform修改时间：2026-07-01 11:18:36