Question

我需要构建一个非常简单的圆环图（2个值，没有动画，纯css）谷歌没有发现任何简单的东西（一切都是使用动画或许多值）

请帮帮我:)。

Answer 1

.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 ....使用<{1}}来自< em> linear-gradient 颜色......要以完美的外观动态设置它将会非常困难......

希望它有所帮助.. !!

Answer 2

我不确定你是否可以使用纯CSS创建一个，但请查看highcharts。他们很简单，你只能用两个值来做（不要被这个例子吓倒）。

CSS简单的圆环图

2 个答案: