HTML5 logo logo implemented with pure CSS

A CSS implementation of the HTML5 Logo, mainly in HTML and CSS technology implementation, examples are as follows:

Source code Download Address:
The CSS section code is as follows:

<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 {Margi    n: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. middle {display:block;    Position:absolute;    width:80px;    height:40px;    Background: #fff; top:162px;}.    HTML5. Icon. text. 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>

The

HTML code is as follows

<div class= "HTML5" > <div class= "icon" > <div class= "bg" > <div class= "right" ></div> <div class= "left" ></div> <div class= "Bottom" ></div> <div class= "Middle" ></d iv> </div> <div class= "overlay" > <div class= "Top" ></div> <div class= "Bottom" ></div> </div> <div class= "text" > <div class= "left" > <div class= "Top" >& Lt;/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>

The preview works as follows:

