锥行渐变由一下三个部分组成
- 起始角度
- 中心位置
- 角渐变断点
锥行渐变可以重新设置中心点
conic-gradient(from 45deg at 15% 15%)
渐变角度可以改成 45 度,中心点位置移动到相对元素坐上角 15%.角渐变断点不仅支持长度值而且还支持角度值.但是需要注意的事,角度值是一个相对角度值而不是一个绝对角度值
conic-gradient(from 45deg,white,deepskyblue 45deg ,white)
此时 deepskyblue 实际渲染的角度坐标是 90deg
实例 锥行渐变饼状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.echart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red 40%,gold 0deg 75%, yellow 0deg);
}
</style>
</head>
<body>
<div class="echart"></div>
</body>
</html>
image.png
