CSS简单的甜甜圈图

Question

我需要建立一个非常简单的甜甜圈图(2个值，没有动画，纯css)没有发现任何简单的谷歌(一切都是使用动画或许多值)

请帮帮我:)

Answer 1

演示
CSS

.value {
    height:100%;
    width:100%;
    border-radius:100%;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    position:absolute;
    background: -moz-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3498db), color-stop(50%, #3498db), color-stop(50%, #FFFFFF), color-stop(100%, #FFFFFF));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Opera11.10+ */
    background: -ms-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* IE10+ */
    background: linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* W3C */
}  

技巧使其工作也是 limitation ....用linear-gradient从 0% to 50% it shows #3498db color and then from 50% to 100% it shows #FFFFFF color…动态地设置一个完美的外观将是非常困难的……

希望有帮助…!!

Answer 2

我不确定您是否可以使用纯CSS制作一个，但请查看highcharts。他们的方法非常简单，您可以只使用两个值(不要被示例吓倒)。