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

预览效果如下：