创建自定义样式饼圈

我试图削减片出一个圆圈，但它被证明是难度比我原来预期的...创建自定义样式饼圈

最好，我不想使用谷歌图表和任何其他等价物，因为我需要尽可能多地控制此圆的样式（最终结果是加载环）。我还需要能够使用jQuery或CSS对片的大小进行动画处理。

请原谅我，但我没有得到很远，这是我的全部：

我关心的圆圈是#layer_2和#layer_3。下面是眼前这个圈子代码：

#layer_2 { 
 
    border-radius: 50%; 
 
    width: 212px; 
 
    height: 212px; 
 
    margin: 14px; 
 
    background: #5c00d2; 
 
    background: -moz-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5c00d2), color-stop(100%, #d586f4)); 
 
    background: -webkit-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: -o-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: -ms-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    background: linear-gradient(45deg, #5c00d2 0%, #d586f4 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5c00d2', endColorstr='#d586f4', GradientType=1); 
 
    -webkit-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5); 
 
    -moz-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5); 
 
    box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5); 
 
} 
 
#layer_3 { 
 
    border-radius: 50%; 
 
    width: 212px; 
 
    height: 212px; 
 
    margin: 0; 
 
    background: transparent; 
 
    -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3); 
 
    box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3); 
 
}

<div id="layer_2"> 
 
    <div id="layer_3"></div> 
 
</div>

我想最终的结果看起来与此类似：

来源

2015-07-28 Ben Carey

如果不使用canvas或svg元素，这将非常困难。 – Shomz

@Shomz我认为可能是这样的:-(Canvas和SVG是我没有经验的一件事，难么？ –

@Shomz我倾向于同意，你不能在CSS中这样做。我认为使用画布会更快 – Mouser

您好我想这会帮助你找出问题，但我不知道如何调整梯度请参阅链接 https://jsfiddle.net/w0yu95u3/3/ 更改两个wedge含义.container1 .wedge和.container2 .wedge要更改transform: rotateZ(N)，但请记住，您必须将其合并到圆周侧的两个部分。只是检查它。

这里是主要的资源 https://cssanimation.rocks/watch/

来源

2015-07-28 10:51:40 rana7cse

谢谢你，我会有一个游戏，看看我是否成功 –

这将是很好，如果你可以结合它的梯度。 – rana7cse

你也可以看到这个链接[pie-charts-with-css]（http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/） – rana7cse

试试这个

layer_2

background-image: 
    linear-gradient(-90deg, transparent 50%, #5c00d2 50%), 
    linear-gradient(200deg, #5c00d2 50%, transparent 50%);

DEMO

来源

2015-07-28 11:41:12

这很棒，但不幸的是我无法让它与渐变一起工作:-(+1为努力 –

创建自定义样式饼圈

回答

layer_2

相关问题