一个 div 实现扇形图(锥形渐变)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个 div 实现扇形图(锥形渐变)相关的知识,希望对你有一定的参考价值。

需要引用的js文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://leaverou.github.io/conic-gradient/conic-gradient.js"></script>
css样式
.bt {
width: 99px;
height: 99px;
border-radius: 50%;
background:conic-gradient(#F7CD07 50%,#A6E33C 50% ,#A6E33C 100%)
}
.bt1 {
width: 99px;
height: 99px;
border-radius: 50%;
background:conic-gradient(#A6E33C 33.33% ,#F7CD07 33.33%, #F7CD07 66.66%,#666 66.66%, #666 100%)
}
div容器
<div class="bt"></div>
<div class="bt1"></div>

相关资料
http://leaverou.github.io/conic-gradient/

以上是关于一个 div 实现扇形图(锥形渐变)的主要内容,如果未能解决你的问题,请参考以下文章

css Sorta圆锥形渐变

Photoshop 基础四 填充(渐变油漆桶)

Matlab 制作图层混合测试图像

CSS3教程:真·任意角度扇形画法

如何使用纯css制作扇形图,合并起来形成饼图

Flutter 中渐变的高级用法