如何在不用JavaScript的情况下使用CSS来实现图表功能

最近看到smashing magazine举行的一个小设计创意比赛，其中有个获奖作品完全用css来显示图表功能，觉得很amazing。

于是，在本地大致剖析了下他的实现原理，果然令人耳目一新啊。

注意：下面的代码只在最新的chrome上测试通过。-_-!

先上个最后的效果图



实现的HTML为

<div id="example5">
<div  id="pyr_chart">
<ul>
<li></li><li></li>
<li></li><li></li>
<li></li><li></li>
</ul>
</div>
</div>

<div id="example6">
<div id="pie_chart">
<ul>
<li id="c1_r"><p><span class="pie_left"></span></p></li>
<li id="c1_l"><p><span class="pie_right"></span></p></li>
<li id="c2_r"><p><span class="pie_left"></span></p></li>
<li id="c2_l"><p><span class="pie_right"></span></p></li>
<li id="c3_r"><p><span class="pie_left"></span></p></li>
<li id="c3_l"><p><span class="pie_right"></span></p></li>
<li id="c4_r"><p><span class="pie_left"></span></p></li>
<li id="c4_l"><p><span class="pie_right"></span></p></li>
<li id="c5_r"><p><span class="pie_left"></span></p></li>
<li id="c5_l"><p><span class="pie_right"></span></p></li>
</ul>
</div>
</div>

用到的css样式为：

#pyr_chart ul, #pie_chart ul {
list-style-type:none;
width:300px;
height:300px;
padding:0;
margin:0;
}

#pyr_chart1 li, #pie_chart li {
position:absolute;
top:0px;
width:300px;
height:300px;
padding:0;
margin:0;
}
#pie_chart p {
width:300px;
height:300px;
padding:0;
margin:0;
}
#pie_chart span {
display:block;
width:150px;
height:300px;
}
#pie_chart ul :nth-child(odd) {
clip:rect(0px, 300px, 300px, 150px);
}
#pie_chart ul :nth-child(even) {
clip:rect(0px, 150px, 300px, 0px);
}
.pie_left {
-webkit-border-top-left-radius:150px;
-webkit-border-bottom-left-radius:150px;
}
.pie_right {
margin-left:150px;
-webkit-border-top-right-radius:150px;
-webkit-border-bottom-right-radius:150px;
}
#c1_l span {
background:#bc3603;
/*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#de3d00), to(#bc3603));*/
}
#c1_r span {
background:#bc3603;
/*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#de3d00), to(#bc3603));*/
}
#c2_l span {
background:#8fb900;
/*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#8fb900), to(#33B900));*/
}
#c2_r span {
background:#8fb900;
/*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#8fb900), to(#33B900));*/
}
#c3_l span {
background:#FFB900;
/*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#00FFB9), to(#FFB900));*/
}
#c3_r span {
background:#FFB900;
/*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#00FFB9), to(#FFB900));*/
}
#c4_l span {
background:#1900FF;
/*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#9800FF), to(#1900FF));*/
}
#c4_r span {
background:#1900FF;
/*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#9800FF), to(#1900FF));*/
}
#c5_l span {
background:#4A3757;
background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#573754), to(#4A3757));
}
#c5_r span {
background:#4A3757;
background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#573754), to(#4A3757));
}
#pie_chart ul :nth-child(1) p {
-webkit-transform:rotate(-50deg);
}
#pie_chart ul :nth-child(2) p {
-webkit-transform:rotate(40deg);
}
#pie_chart ul :nth-child(3) p {
-webkit-transform:rotate(0deg);
}
#pie_chart ul :nth-child(4) p {
-webkit-transform:rotate(130deg);
}
#pie_chart ul :nth-child(7) p {
-webkit-transform:rotate(40deg);
}
#pie_chart ul :nth-child(8) p {
-webkit-transform:rotate(-50deg);
}
#pie_chart ul :nth-child(5) p {
-webkit-transform:rotate(130deg);
}
#pie_chart ul :nth-child(6) p {
-webkit-transform:rotate(0deg);
}
#pie_chart ul :nth-child(9) p {
-webkit-transform:rotate(-25deg);
}
#pie_chart ul :nth-child(10) p {
-webkit-transform:rotate(20deg);
}
#pyr_chart li {
-webkit-transition:all .5s;
}
#pyr_chart ul :nth-child(1) {
background: #bc3603;
background-image: -webkit-gradient(radical, center, center, 10, center, center, 150, from(#de3d00), to(#bc3603));
height:300px;
}
#pyr_chart ul :nth-child(2) {
background: #D97904;
background-image: -webkit-gradient(radical, center, center, 10, center, center, 150, from(#fb8a00), to(#D97904));
height:292px;
}
#pyr_chart ul :nth-child(3) {
background: #F2B705;
background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#ffc517), to(#F2B705));
height:277px;
}

#pyr_chart ul :nth-child(4) {
background: #86AD00;
background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#9bc800), to(#86AD00));
height:255px;
}

#pyr_chart ul :nth-child(5) {
background: #0092B9;
background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#00addb), to(#0092B9));
height: 180px;
}

#pyr_chart ul :nth-child(6) {
width: 0;
height: 0;
border-color: transparent #d8d6cb transparent #d8d6cb;
border-width: 0px 150px 300px 150px;
border-style:solid;
}
#pyr_chart, #pie_chart {
position:relative;
float:left;
width:300px;
height:300px;
margin:0;
padding:0;
}
#pyr_chart li {
position:absolute;
width:300px;
}

以下是本人的一个小创意，完全用CSS实现的一个动物拼图，



用的HTML脚本是：

<div id="example7">
<div id="head"></div>
<div id="body">
<div id="b1"></div>
<div id="b2"></div>
<div id="hand"></div>
<div id="foot"></div>
</div>
<div id="tail">
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
</div>
</div>

用到的CSS样式为：

#example7 {
position:relative;
top:400px;
overflow:hidden;
width:183px;
height:150px;
}

#head {
width:0;
height:0;
border-color:transparent #e0e000 transparent transparent;
border-width:40px 30px 0 0;
border-style:solid;
}
#body {
margin:0 0 0 13px;
position:relative;
width:95px;
height:110px;
overflow:hidden;
}
#b1 {
float:left;
width:0;
height:0;
border-color:transparent #3298fd transparent transparent;
border-width:0 55px 55px 0;
border-style:solid;
}
#b2 {
float:left;
width:0;
height:0;
border-color:transparent transparent transparent #fd3200;
border-width:40px 0 40px 40px;
border-style:solid;
}
#b2:after {
content:"";
clear:both;
}
#hand {
position:absolute;
z-index:3;
top:17px;
left:17px;
width:0;
height:0;
border-color:transparent transparent transparent #65fd32;
border-width:22px 0 20px 20px;
border-style:solid;
}
#foot {
position:absolute;
z-index:3;
bottom:0;
right:35px;
width:0;
height:0;
border-color:transparent #f29ef2 transparent transparent;
border-width:35px 35px 0 0;
border-style:solid;
}
#tail {
position:absolute;
width:94px;
height:37px;
bottom:33px;
right:0;
}
#t1 {
position:relative;
top:6px;
left:6px;
width:26px;
height:26px;
background-color:#fd9800;
-webkit-transform:rotate(45deg);
}
#t2 {
margin:0;
width:0;
height:0;
border-style:solid;
border-color:transparent transparent #cb65fd transparent;
border-width:0 38px 19px 19px;
position:absolute;
bottom:0;
right:19px;
}
#t3 {
margin:0;
width:0;
height:0;
border-style:solid;
border-color:#cb65fd transparent transparent transparent;
border-width:19px 19px 0 38px;
position:absolute;
bottom:0;
right:0;
}