用純css實現的html5 logo標誌

一個用css實現的html5 Logo，主要用html和css技術實現，例子如下：

原始碼下載地址：
css部分代碼如下：

<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>

html代碼如下

<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>

預覽效果如下：

