css3
<html>
<head>
<style type="text/css">
/* Global reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, cite, code, em, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { line-height: 1em; font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; }
ol, ul { list-style: none }
/*Demo page Styles*/
body {
font-size: 1em;
}
::-moz-selection {
background: #000;
color: #f26d02;
}
::selection {
background: #000;
color: #f26d02;
}
#wrapper_bottom { clear: both; overflow: hidden;}
#wrapper_bottom div.box {
float: left;
margin-right: 19px;
overflow: hidden;
width: 288px;
height: 220px;
}
/* First three column box: Linear Gradient */
#wrapper_bottom div.box:first-child {
background-image: -webkit-gradient(linear, 5% 0%, 11% 91%, from(#D9D9D9), to(#FFFFFF), color-stop(.5,#CFCFCF));
background-image: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #d9d9d9, #CFCFCF 100%);
}
#wrapper_bottom div.box:last-child { margin-right: 0px !important;}
/* First three column box "3D" bar chart */
.cube {
position: relative;
top: 38%;
left: 3%;
}
.cube.two {
left: 37%;
top: 20%;
}
.cube.three {
left: 70%;
top: 65%;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 20px;
height: 50px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.cube .topFace div { background: #35698F }
.cube .rightFace { background: #29516F }
.cube .leftFace { background: #172E40 }
.cube.two .topFace div { background: #F7581E }
.cube.two .rightFace { background: #BF4317 }
.cube.two .leftFace { background: #6F270D }
.cube.three .topFace div { background: #8F8F8F }
.cube.three .rightFace { background: #6F6F6F }
.cube.three .leftFace { background: #4F4F4F }
.cube .rightFace, .cube .leftFace { height: 70px}
.cube.two .rightFace, .cube.two .leftFace { height: 110px }
.cube.three .rightFace, .cube.three .leftFace { height: 10px}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
-moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
-o-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
}
.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
left: 39px;
}
.rightFace h5 {
font-size: 9px;
color: #fff;
text-align: left;
position: absolute;
line-height: 1.3em;
top: 10%;
left: 1px;
text-align: center;
}
.topFace div {
font-size: 10px;
height: 20px !important;
width: 20px !important;
padding:10px;
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
-o-transform: skew(0deg, -30deg) scale(1, 1.16);
}
.topFace {
left: 19px;
top: -31px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
.cube h4 {
color: rgba(255,255,255, 0.8);
font-size:12px;
font-style:italic;
left:27px;
position:absolute;
top:-18px;
z-index:2;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.box h3 {
color: rgba(0,0,0, 1);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
font-size: 12px;
text-align: center;
margin: 4px 0;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper_bottom">
<div class="box">
<h3>Who would win in a fight?</h3>
<div class="cube one">
<h4>60%</h4>
<div class="topFace"><div>
</div></div>
<div class="leftFace">
</div>
<div class="rightFace">
<h5>Coach Ditka</h5>
</div>
</div>
<div class="cube two">
<h4>80%</h4>
<div class="topFace"><div>
</div></div>
<div class="leftFace">
</div>
<div class="rightFace">
<h5>Hurricane Ditka</h5>
</div>
</div>
<div class="cube three">
<h4>15%</h4>
<div class="topFace"><div>
</div></div>
<div class="leftFace">
</div>
<div class="rightFace">
<h5>Polish Sausage</h5>
</div>
</div>
</div>
</div>
<div style="display:none;">
<script language="javascript" type="text/javascript" src="http://js.users.51.la/3666669.js"></script>
<noscript><a rel="nofollow" href="http://www.51.la/?3666669" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/3666669.asp" style="border:none" /></a></noscript>
</div>
</body>
</html>
