分色空心圆
分色空心圆
提问于 2018-03-24 16:36:28
我正致力于生成一个空心图圆。每一部门应跨越一个百分比。
问题陈述:如果您看到输出，这3种颜色组成的圆圈应该占一个圆的百分比。对于ex，如果颜色为1 = 33%，则颜色2=33%和color3=为33%时，圆圈应按三种相同的颜色比例。现在，圆圈并不是按照颜色的百分比划分的。任何帮助都将不胜感激。
编辑：可以使用html画布实现吗？
.a{
margin: 0;
width: 90px;
text-align: center;
height: 90px;
border-radius: 50%;
border: 4px solid transparent;
background-size: 100% 100%, 50% 50%, 50% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(30deg, rgb(240,120,16) 100%, lightgrey 0%),
linear-gradient(120deg, rgb(127,127,127) 100%, lightgrey 0%),
linear-gradient(310deg, rgb(255,192,0) 100%, lightgrey 0%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box, border-box;
background-clip: content-box, border-box, border-box, border-box, border-box;
}<div class="a"></div>
回答 1
Stack Overflow用户
发布于 2018-03-24 19:28:36
您可以这样调整代码：
.a{
margin: 0;
width: 90px;
text-align: center;
height: 90px;
border-radius: 50%;
background-size:50% 100% ,100% 50%,100% 100%;
background-position:100% 0,0 100%,0 0;
background-repeat: no-repeat;
background-image:
linear-gradient(33deg,transparent 37%, green 0),
linear-gradient(-33deg, red 70%, blue 0%),
linear-gradient(to right, blue 50%, green 50%);
position:relative;
}
.a:before {
content:"";
position:absolute;
top:5px;
right:5px;
left:5px;
bottom:5px;
background:#fff;
border-radius:50%;
}<div class="a"></div>
顺便说一句，更适合考虑SVG或更精确的工具来创建这样的图表。下面是SVG的一个想法：
.pie {
width: 100px;
}
.pie circle {
fill: none;
stroke-width: 4;
stroke-dasharray:55 110
}<svg viewBox="0 0 64 64" class="pie">
<circle r="40%" cx="50%" cy="50%" stroke="red">
</circle>
<circle r="40%" cx="50%" cy="50%" stroke=" green" stroke-dashoffset=" -55">
</circle>
<circle r="40%" cx="50%" cy="50%" stroke="blue" stroke-dashoffset="-110">
</circle>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49467182
复制相关文章
相似问题
腾讯云开发者
