Style sheets in http://nicolasgallagher.com/lab/html5-logo-in-css2/
Inline style sheet
/* * "Use SVG", "CSS is not meant for this", "blah blah" - yes, I know. Thanks * Looks best in Firefox 3.6+ and Chrome. Edges are jagged in IE 8 and Opera. * * Nicolas Gallagher (20 Jan 2011) */ html { position:relative; width:364px; height:512px; padding:0; margin:50px auto 0; } body { padding:0; margin:0; } h1 { width:100%; height:100px; padding:0; margin:0 0 450px; font:100px/60px 'Arial Black', sans-serif; text-align:center; } h2 { overflow:hidden; height:0; padding:0; margin:0; text-indent:-999em; } p { text-align:center; font:14px/1.2 Arial, sans-serif; } p a { font-weight:bold; color:#D14926; } /* ------------- LOGO SHAPES ------------- */ html:before, html:after, body:before, body:after, header:before, header:after, h1:before, h1:after, h2:before, h2:after { content:""; position:absolute; } /* Main shield */ html:before, html:after { z-index:1; left:2px; top:100px; width:292px; border-width:374px 34px 0; border-style:solid; border-color:#e44d26 transparent transparent; } html:after { left:35px; top:474px; width:0; border-width:40px 146px 0; border-top-color:#e44d26; } /* Brighter panel of the shield (right side) */ body:before { z-index:2; left:182px; top:130px; border-width:318px 28px 34px 120px; border-style:solid; border-color:#f16529 transparent transparent #f16529; } /* Top right chunk of "5" */ body:after { z-index:3; left:182px; top:175px; border-width:45px 4px 0px 110px; border-style:solid; border-color:#fff transparent transparent #fff; } /* Top left chunk of "5" */ header:before, header:after { z-index:3; left:68px; top:175px; border-width:138px 102px 0px 12px; border-style:solid; border-color:#ebebeb #ebebeb transparent transparent; } header:after { left: 117px; top: 220px; border-width:48px 61px 0px 4px; border-color:#E44D26 #E44D26 transparent transparent; } /* Bottom left chunk of "5" */ h1:before, h1:after { z-index:3; left:83px; top:335px; border-width:72px 93px 25px 6px; border-style:solid; border-color:#ebebeb #ebebeb transparent transparent; } h1:after { left:128px; top:335px; border-width:39px 51px 13px 3px; border-color:#E44D26 #E44D26 transparent transparent; } /* Bottom right chunk of "5" */ h2:before, h2:after { z-index:3; left:182px; top:268px; border-width:139px 11px 25px 94px; border-style:solid; border-color:#fff transparent transparent #fff; } h2:after { left:182px; top:313px; border-width:60px 4px 14px 52px; border-color:#F16529 transparent transparent #F16529; }
/*
* "Use SVG", "CSS is not meant for this", "blah blah" - yes, I know. Thanks
* Looks best in Firefox 3.6+ and Chrome. Edges are jagged in IE 8 and Opera.
*
* Nicolas Gallagher (20 Jan 2011)
*/