CSS3 画桶图（类似数据库或者磁盘的抽象图）

先看最终图形效果：

主要的DOM就一个：

<div class="disk" data-content="0"></div>

看CSS，没考虑兼容性，但目前IE11，Chrome 46都没问题：

.disk{
			height:150px;
			width:100px;
			background:#efefef;
			border-left:2px solid #ddd;
			border-right:2px solid #ddd;
			background: linear-gradient(to bottom,#efefef 100%,#ccc 0%);
		}
		
		.disk:before{
			display: block;
			content: attr(data-content) '%';
			height: 30px;
			width: 100%;
			border: 2px solid #ddd;
			border-radius: 50%;
			transform: rotateX(40deg);

			background-color: #efefef;
			text-align: center;
			line-height: 1.5em;
			position: relative;
			top: -15px;
			left:-2px;
		}
		
		.disk:after{
			display: block;
			content: "";
			height:30px;
			width:100%;
			border:2px solid #ddd;
			border-top:0px;
			
			transform: rotateX(40deg);
			

			background: linear-gradient(to bottom,rgba(239,239,239,0) 40%,#efefef 50%);
			
			border-radius: 50%;
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 50%;
			
			position: relative;
			top: 100px;
			left:-2px;

		}

动态改变填充部分代码需要用jQuery和一个addRule的插件，因为要修改:after的样式，jQuery不支持目前

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
/*!
 * jquery.addrule.js 0.0.2 - https://gist.github.com/yckart/5563717/
 * Add css-rules to an existing stylesheet.
 *
 * @see http://stackoverflow.com/a/16507264/1250044
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/11/23
 **/

(function ($) {

    window.addRule = function (selector, styles, sheet) {

        styles = (function (styles) {
            if (typeof styles === "string") return styles;
            var clone = "";
            for (var prop in styles) {
                if (styles.hasOwnProperty(prop)) {
                    var val = styles[prop];
                    prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case
                    clone += prop + ":" + (prop === "content" ? '"' + val + '"' : val) + "; ";
                }
            }
            return clone;
        }(styles));
        sheet = sheet || document.styleSheets[document.styleSheets.length - 1];

        if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        else if (sheet.addRule) sheet.addRule(selector, styles);

        return this;

    };

    if ($) $.fn.addRule = function (styles, sheet) {
        addRule(this.selector, styles, sheet);
        return this;
    };

}(this.jQuery || this.Zepto));

</script>

下面看具体的修改逻辑：

<script type="text/javascript">
		function add(val){
			if(val == 0){
				$(".disk:after").addRule({backgroundImage: "linear-gradient(to bottom, rgba(239, 239, 239, 0) 40%, #efefef 50%)"});
				$(".disk").css({backgroundImage: "linear-gradient(to bottom, #efefef 100%, #ccc 0%)"});
			}
			else if(val > 0 && val <= 100){
				$(".disk:after").addRule({backgroundImage: "linear-gradient(to bottom, rgba(239, 239, 239, 0) 40%, #ccc 50%)"});
				
				$(".disk").css({backgroundImage: "linear-gradient(to bottom, #efefef " + (100-val) + "%, #ccc 0%)"});
			}
			$(".disk").attr('data-content',val);
		}
	</script>

有个网址是用CSS画各种图的集合：https://css-tricks.com/examples/ShapesOfCSS/，有兴趣的自己可以看看，但没有这种简单的桶装图

==========================================================================

实际在项目中，没有用这种一个DOM的结构，因为这样虽然DOM结构简单了，但修改填充就麻烦了。可以用下面这种多个DIV结构，修改填充就简单点：

<div class="disk-chart">
<div class="top"><span>{{percentage}}%</span></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>

项目中的样子：