当前位置：首页 > 文章列表 > 文章 > 前端 > 怎么利用HTML的CSS conic-gradient()创建锥形渐变实现饼图样式背景

怎么利用HTML的CSS conic-gradient()创建锥形渐变实现饼图样式背景

2026-05-03 08:03:42 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《怎么利用HTML的CSS conic-gradient()创建锥形渐变实现饼图样式背景》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

conic-gradient()以圆心为原点顺时针旋转，起始角默认0deg（正右），需用from显式调整；颜色停止点必须用角度单位；多扇区需角度首尾严格衔接；实现饼图须配合border-radius:50%且注意Safari兼容性及交互限制。

conic-gradient() 基础语法和关键参数怎么写

conic-gradient() 生成的是围绕圆心顺时针旋转的色带，和 linear-gradient() 或 radial-gradient() 的坐标系完全不同。它默认从 0deg（正右方向）开始，不是顶部——这点极易导致饼图扇区错位。

起始角度必须显式声明，比如 conic-gradient(from 0deg, #f00, #0f0, #00f)；不写 from 就是默认 from 0deg，但一旦你要对齐“12点方向”，就得用 from 90deg
颜色停止点必须用角度单位（deg、turn、rad），不能用百分比或像素
多个扇区拼接时，相邻颜色的起止角度必须严格衔接，否则会出现细缝或重叠。例如 0deg→120deg、120deg→240deg、240deg→360deg

用 conic-gradient 实现单个饼图扇区背景

直接把 conic-gradient() 当作元素的 background，最简方式是固定尺寸 + 圆角：

.pie-slice {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #ff6b6b 0deg 30deg, #4ecdc4 30deg 120deg, #45b7d1 120deg 360deg);
}

注意三点：

border-radius: 50% 必须加，否则渐变仍是方形裁剪
from 90deg 把 0° 对齐到顶部（即钟表12点），符合视觉直觉
各段角度必须首尾相接：30deg 后紧接 30deg，不能写成 31deg 或漏掉起始值

动态生成多扇区饼图时怎么避免角度计算错误

手动算角度容易出错，尤其当数据是 [30, 50, 20] 这类百分比时。推荐用 JS 累计角度并拼字符串：

总和未必是 100（可能有舍入误差），应归一化后乘以 360
每段的起始角 = 上一段结束角，第一段起始为 0（或 90deg 加偏移）
CSS 不支持变量插值，所以得拼成完整字符串赋给 style.background

const data = [30, 50, 20];
const total = data.reduce((a, b) => a + b, 0);
let start = 90; // 对齐顶部
let gradient = 'conic-gradient(from ' + start + 'deg';
<p>data.forEach(val => {
const end = start + (val / total) <em> 360;
gradient += `, #${Math.floor(Math.random()</em>0xffffff).toString(16).padStart(6,'0')} ${start}deg ${end}deg`;
start = end;
});</p><p>element.style.background = gradient + ')';
</p>

常见坑：