CSS 简单的圆环图答案

【问题标题】：CSS simple doughnut chartCSS 简单的圆环图
【发布时间】：2014-06-22 18:49:48
【问题描述】：

我需要构建一个非常简单的圆环图（2 个值，没有动画，纯 css）在 google 中没有找到任何简单的东西（一切都使用动画或许多值）

请帮帮我:)

【问题讨论】：

stackoverflow.com/a/20529884/2260614 和 stackoverflow.com/a/8468946/2260614
我需要这个洞对背景是透明的，而在例子中这是不可能的..
jsfiddle.net/8nuut 是这样的吗？您将不得不使用旋转和顶部位置来获得所需的效果...... p.s.这里有一些有用的想法来获得不同的形状：paulund.co.uk/how-to-create-different-shapes-in-css
codepen.io/clintioo/pen/ouxGp

【解决方案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.... 使用来自 @987654325 的 linear-gradient @ 颜色...要以完美的外观动态设置它会很困难...

希望对您有所帮助..!!

【讨论】：

【解决方案2】：

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

【讨论】：