CSS `conic-gradient()` 实用图形绘制：如何实现圆形缺一个角？

Category（分类）: CSS Status: 已整理

conic-gradient() 的中文名称通常是锥形渐变或角向渐变。它不是用来绘制三维圆锥，而是让颜色围绕一个中心点按角度变化。

它可以用于：

饼图和进度图；
圆形缺角；
三角形、箭头和角标；
棋盘、虚线网格和十字线背景；
一些 CSS Battle 图形。

现代主流浏览器已经普遍支持 conic-gradient()。如果项目需要兼容非常旧的浏览器，可以提供纯色、图片、SVG 或其他 CSS fallback。

一、`conic-gradient()` 基础

1. 基本语法

.demo {
  background: conic-gradient(
    from 40deg at 50% 50%,
    #fff 0deg 180deg,
    #000 180deg 360deg
  );
}

主要参数如下：

from <angle>：设置渐变的起始角度，默认从 0deg 开始；
at <position>：设置渐变中心，默认是 50% 50%；
颜色停止点：可以使用角度或百分比；
相同位置的停止点可以创建没有过渡的硬边界。

0deg 通常从元素顶部开始，角度按照顺时针方向增加。渐变中心不一定是元素中心，可以通过 at 调整。

2. 绘制饼图

<div class="pie"></div>

.pie {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    red 0deg 36deg,
    orange 36deg 170deg,
    yellow 170deg 360deg
  );
}

锥形渐变饼图示例

3. 实现圆形缺一个角

如果缺口需要透明，不能使用白色代替透明色：

<div class="missing-sector"></div>

.missing-sector {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from -45deg,
    transparent 0deg 90deg,
    #168bf5 90deg 360deg
  );
}

这里 0deg 到 90deg 是透明区域，剩余部分是蓝色。缺口会显示元素后面的背景。

如果元素本身还需要其他背景，可以使用 mask：

.missing-sector {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #168bf5;
  mask: conic-gradient(
    from -45deg,
    transparent 0deg 90deg,
    #000 90deg 360deg
  );
}

圆形缺角效果

二、绘制三角形

1. 线性渐变绘制直角三角形

在 conic-gradient() 出现之前，可以使用线性渐变绘制直角三角形：

.right-triangle {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    -45deg,
    royalblue 0 50%,
    transparent 50% 100%
  );
}

线性渐变绘制直角三角形

这种方式适合直角三角形。对于其他方向或不规则组合，通常需要多个渐变层或其他方案。

其他三角形形状

两个直角三角形拼接

2. 使用锥形渐变绘制三角形

使用一个 90deg 的扇区即可得到类似三角形的图形：

.triangle {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    from -45deg,
    royalblue 0deg 90deg,
    transparent 90deg 360deg
  );
}

锥形渐变绘制三角形

需要注意，锥形渐变形成的是从渐变中心向边缘展开的扇区。最终是否呈现为视觉上的三角形，还与元素尺寸、中心点和裁剪方式有关。

锥形渐变三角形应用

三、绘制箭头符号

箭头可以看作两个方向相反或互补的三角形叠加。示例中的每个渐变都是一个独立背景层，因此需要同时声明 background-image、background-size、background-position 和 background-repeat。

.arrow {
  width: 100px;
  height: 60px;
  background-image:
    conic-gradient(
      from 30deg at 0 50%,
      transparent 0deg 120deg,
      royalblue 120deg 360deg
    ),
    conic-gradient(
      from 210deg at 100% 50%,
      transparent 0deg 120deg,
      royalblue 120deg 360deg
    );
  background-size: 40px 60px;
  background-position: 20px 50%, 40px 50%;
  background-repeat: no-repeat;
}

箭头的第一个三角形

箭头的第二个三角形

透明三角形的组合

组合后的箭头

原文中的：

background-position: 20px 50%, -20px 50%;

只有在已经定义了两个背景图层时才有意义，不能脱离 background-image 单独使用。

四、绘制河流或重复箭头符号

在箭头图形的基础上，可以通过调整背景尺寸并沿一个方向重复来生成连续图案：

.river {
  width: 120px;
  height: 160px;
  background-image: conic-gradient(
    from 30deg at 0 50%,
    transparent 0deg 120deg,
    royalblue 120deg 360deg
  );
  background-size: 40px 30px;
  background-repeat: repeat-y;
}

如果希望横向和纵向都重复，应明确使用 background-repeat: repeat。默认值虽然也是 repeat，但在图案示例中显式写出更容易理解。

河流符号示例

不同背景高度的河流图案

CSS Battle 中的类似图案

五、绘制三角形角标

1. 设置渐变中心

锥形渐变默认以背景绘制区域中心为中心。通过 at 可以把中心移动到左上角：

.corner-triangle {
  width: 120px;
  height: 120px;
  background: conic-gradient(
    from -45deg at 10px 10px,
    royalblue 0deg 90deg,
    transparent 90deg 360deg
  );
}

三角形角标的目标效果

2. 通过背景位置和重复拆分角标

.corner-badge {
  width: 200px;
  height: 120px;
  background-image:
    conic-gradient(
      from -45deg at 10px 10px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ),
    conic-gradient(
      from 135deg at left 10px bottom 10px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    );
  background-position: -10px 0;
  background-repeat: repeat;
}

将中心点、背景位置和背景重复结合起来，可以把一个渐变图形拆分为多个角标。

移动渐变中心点

背景位置偏移后的效果

重复平铺后的角标

角标动画演示

3. 两个角的完整示例

.corner-badge {
  width: 240px;
  height: 120px;
  background:
    conic-gradient(
      from -45deg at 10px 10px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) -10px 0 / 100% 100% repeat,
    conic-gradient(
      from 135deg at left 10px bottom 10px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) -10px 0 / 100% 100% repeat;
}

硬编码的 10px 会影响角标尺寸，不能笼统地说它与容器尺寸完全无关。需要响应式缩放时，应使用百分比、calc() 或 SVG 等方案。

角标完整效果

六、绘制矩形和正方形区域

锥形渐变本身产生的是按角度划分的扇区。配合渐变中心、背景尺寸和背景位置，可以组合出矩形或正方形区域。

.rectangle-part {
  width: 120px;
  height: 120px;
  background: conic-gradient(
    from 0deg,
    royalblue 0deg 90deg,
    transparent 90deg 360deg
  );
}

锥形渐变绘制矩形区域

改变起始角度：

.rectangle-part--top {
  background: conic-gradient(
    from -90deg,
    royalblue 0deg 90deg,
    transparent 90deg 360deg
  );
}

.rectangle-part--bottom {
  background: conic-gradient(
    from 180deg,
    royalblue 0deg 90deg,
    transparent 90deg 360deg
  );
}

原文中“起始角度为 180deg”的示例仍写成了 from -90deg，已修正。

不同起始角度的矩形区域

另一种矩形区域

七、正方形角标

正方形角标与三角形角标的思路类似。先把渐变中心移动到固定位置：

.square-corner {
  width: 120px;
  height: 120px;
  background: conic-gradient(
    from -90deg at 20px 20px,
    royalblue 0deg 90deg,
    transparent 90deg 360deg
  );
}

正方形角标目标效果

将中心点设置为 20px 20px 后，可以通过背景尺寸控制图案范围：

.square-corner {
  width: 200px;
  height: 200px;
  background:
    conic-gradient(
      from -90deg at 20px 20px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) 0 0 / calc(100% - 20px) calc(100% - 20px) no-repeat;
}

calc() 中的加减运算符建议在两侧保留空格，例如 calc(100% - 20px)，不要写成 calc(100%-20px)。

正方形角标的渐变图形

移动渐变中心后的正方形

调整背景尺寸的原理

正方形角标完整效果

八、棋盘背景

棋盘可以使用四个明确的颜色区间：

.checkerboard {
  width: 160px;
  height: 160px;
  background: conic-gradient(
    royalblue 0deg 90deg,
    transparent 90deg 180deg,
    royalblue 180deg 270deg,
    transparent 270deg 360deg
  );
  background-size: 20px 20px;
  background-repeat: repeat;
}

相比原文中使用多个小于前一个停止点的角度，明确写出 0deg、90deg、180deg、270deg 更容易理解，也不依赖浏览器对停止点顺序的自动修正。

棋盘效果

棋盘渐变原理

九、虚线网格

通过调整渐变中心和背景尺寸，可以构造重复的虚线网格：

.dashed-grid {
  width: 240px;
  height: 160px;
  background:
    conic-gradient(
      from -90deg at 10px 4px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) 0 0 / 30px 30px repeat;
}

实际网格的线宽、间距和偏移量需要根据容器尺寸调整。复杂的写作网格也可以使用 SVG 或多个线性渐变实现。

虚线网格效果

虚线网格原理

十、十字线背景

将两个方向的重复图案叠加，可以得到十字线背景：

.cross-grid {
  width: 240px;
  height: 160px;
  background:
    conic-gradient(
      from -90deg at 10px 4px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) 0 3px / 30px 30px repeat,
    conic-gradient(
      from -90deg at 4px 10px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) 3px 0 / 30px 30px repeat;
}

十字线背景

十一、折线角标

折线角标可以理解为多个方向的图形组合。沿用前面移动渐变中心和背景位置的思路：

.folded-corner {
  width: 240px;
  height: 160px;
  background:
    conic-gradient(
      from -90deg at 20px 8px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) -10px -4px / 100% 100% repeat,
    conic-gradient(
      from -90deg at 8px 20px,
      royalblue 0deg 90deg,
      transparent 90deg 360deg
    ) -4px -10px / 100% 100% repeat;
}

折线角标目标效果

折线角标组合原理

十二、使用建议和注意事项

1. 明确背景层数量

多个背景层使用逗号分隔：

.box {
  background-image: url(a.png), url(b.png);
  background-position: 0 0, 10px 10px;
}

background-position、background-size 和 background-repeat 中的多个值要按照背景层顺序一一对应。

2. 优先使用硬边界

需要明确的几何图形时，建议写成：

conic-gradient(
  #168bf5 0deg 90deg,
  transparent 90deg 360deg
)

而不是依赖停止点自动修正：

conic-gradient(#168bf5 90deg, transparent 0deg)

后者在很多情况下也能得到硬边界，但不够直观。

3. 不要把 CSS 图形当成所有场景的最佳方案

CSS 绘制适合：

尺寸需要随容器变化的简单图形；
颜色需要通过主题变量动态切换的图形；
不希望额外请求图片资源的装饰效果。

SVG 更适合：

复杂路径；
需要精确缩放的图标；
需要语义、可访问性或独立交互的图形；
需要方便控制描边、填充和路径动画的场景。

固定尺寸、固定颜色且不需要响应式变化的图形，也可以使用经过优化的图片资源。

十三、Demo 和总结

原文中的多个案例可以整理到以下 Demo 中继续查看：

conic-gradient() 不只是用来画圆形渐变或饼图。通过控制渐变中心、起始角度、停止点、背景尺寸、背景位置和重复方式，还可以构造许多规则图形。

但 CSS 图形代码应该保持可读，复杂图形不要为了减少一个 SVG 文件而堆叠大量难以维护的渐变。实际项目中应根据图形复杂度、响应式要求、交互需求和可访问性选择 CSS、SVG 或图片资源。

CSS conic-gradient() 实用图形绘制：如何实现圆形缺一个角？