用纯css实现的html5logo标志

<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}
body {
 line-height: 1;
 color: black;
 background: white;
}
caption, th, td {
 text-align: left;
 font-weight: normal;
}
:focus {
 outline: 0;
}
table {
 border-collapse: separate;
 border-spacing: 0;
}
ol, ul {
 list-style: none;
}
a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #666;
 text-decoration: none;
 margin: 40px auto 0;
 display: block;
 width: 120px;
 text-align: center;
}
.html5 {
 width:345px;
 height:385px;
 display:block;
 margin:100px auto 0;
 position:relative;
}
.html5 .icon .text .left {
 display:block;
 position:absolute;
 width:182px;
 height:400px;
}
.html5 .icon .text .left .left {
 display:block;
 position:absolute;
 width:40px;
 height:130px;
 background:#ebebeb;
 top:72px;
 left:82px;
 -webkit-transform:skew(5deg);
 -moz-transform:skew(5deg);
}
.html5 .icon .text .left .top {
 display:block;
 position:absolute;
 width:104px;
 height:40px;
 background:#ebebeb;
 top:72px;
 left:80px;
}
.html5 .icon .text .left .middle {
 display:block;
 position:absolute;
 width:96px;
 height:40px;
 background:#ebebeb;
 top:162px;
 left:88px;
}
.html5 .icon .text .left .bottom {
 display:block;
 position:absolute;
 width:85px;
 height:40px;
 background:#ebebeb;
 top:261px;
 left:102px;
-webkit-transform::rotate(12deg);
 -moz-transform:rotate(12deg);
}
.html5 .icon .text .left .vert {
 display:block;
 position:absolute;
 width:40px;
 height:70px;
 background:#ebebeb;
 top:222px;
 left:95px;
 -webkit-transform:skew(5deg);
 -moz-transform:skew(5deg);
}
.html5 .icon .text .right {
 height:400px;
 width:150px;
 left:182px;
 display:block;
 position:absolute;
 overflow:hidden;
}
.html5 .icon .text .right .top {
 display:block;
 position:absolute;
 width:105px;
 height:40px;
 background:#fff;
 top:72px;
 left:-3px;
 -webkit-transform:skew(-5deg);
 -moz-transform:skew(-5deg);
}
.html5 .icon .text .right .middle {
 display:block;
 position:absolute;
 width:80px;
 height:40px;
 background:#fff;
 top:162px;
}
.html5 .icon .text .right .right {
 display: block;
 position: absolute;
 width: 40px;
 height: 130px;
 background: #ffffff;
 top: 162px;
 left: 50px;
 -webkit-transform: skew(-5deg);
 -moz-transform: skew(-5deg);
}
.html5 .icon .text .right .bottom {
 display: block;
 position: absolute;
 width: 85px;
 height: 40px;
 background: #ffffff;
 top: 261px;
 left: -5px;
 -webkit-transform: rotate(-12deg);
 -moz-transform: rotate(-12deg);
}
.html5 .icon .overlay {
 height: 400px;
 width: 150px;
 left: 182px;
 position: absolute;
 display: block;
 overflow: hidden;
}
.html5 .icon .overlay .top {
 width: 160px;
 height: 300px;
 top: 28px;
 left: -35px;
 display: block;
 background: #f0652a;
 position: absolute;
 -webkit-transform: skew(-5deg);
 -moz-transform: skew(-5deg);
}
.html5 .icon .overlay .bottom {
 position:absolute;
 top:328px;
 left:-180px;
 display:block;
 border-color:#f0652a transparent transparent;
 border-style:solid;
 border-width:35px 140px 0;
 height:0px;
 margin:0 10px;
 width:0;
 font-size:0;
 line-height:0;
}
.html5 .icon .bg .middle {
 position:absolute;
 left:132px;
 background:#e44c27;
 width:50px;
 height:355px;
 display:block;
}
.html5 .icon .bg .right {
 position:absolute;
 left:166px;
 background:#e44c27;
 width:170px;
 height:350px;
 display:block;
 -webkit-transform:skew(-5deg);
 -moz-transform:skew(-5deg);
}
.html5 .icon .bg .left {
 position:absolute;
 left:24px;
 background:#e44c27;
 width:170px;
 height:350px;
 -webkit-transform:skew(5deg);
 -moz-transform:skew(5deg);
}
.html5 .icon .bg .bottom {
 position:absolute;
 top:350px;
 left:30px;
 display:block;
 border-color:#e44c27 transparent transparent;
 border-style:solid;
 border-width:35px 140px 0;
 height:0px;
 margin:0px 10px;
 width:0;
 font-size:0;
 line-height:0;
}
</style>

<div class="html5">
 <div class="icon">
 <div class="bg">
 <div class="right"></div>
 <div class="left"></div>
 <div class="bottom"></div>
 <div class="middle"></div>
 </div>
 <div class="overlay">
 <div class="top"></div>
 <div class="bottom"></div>
 </div>
 <div class="text">
 <div class="left">
 <div class="top"></div>
 <div class="left"></div>
 <div class="middle"></div>
 <div class="bottom"></div>
 <div class="vert"></div>
 </div>
 <div class="right">
 <div class="top"></div>
 <div class="right"></div>
 <div class="middle"></div>
 <div class="bottom"></div>
 </div>
 </div>
 </div>
</div>