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>

项目中的样子：