css3

<html>

<head>

/* 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;

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;

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;

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>

<h3>Who would win in a fight?</h3>

</div></div>

</div>

<h5>Coach Ditka</h5>

</div>

</div></div>

</div>

<h5>Hurricane Ditka</h5>

</div>

</div></div>

</div>

<h5>Polish Sausage</h5>

</div>

</div>

</body>

</html>