一个 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 实现扇形图(锥形渐变)的主要内容,如果未能解决你的问题,请参考以下文章