Lowe's Logo in CSS3

dabblet.css

/**
 * Lowe's Logo in CSS3
 */
 
 body { margin: 125px; background: #15b6e5; }

#lowes {
  width: 323px;
  height: 95px;
  border: 4px solid #fff;
  position: relative;
  font-size: 60px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: center;
  line-height: 100px;
  z-index: 25;
  color: #fff;
}

#lowes:before {
 height: 11px;
   width: 273px;
   border-left: 4px solid #fff;
border-right: 4px solid #fff;
border-top: 4px solid #fff;
border-bottom: 4px solid #15b6e5;
   content:"";
   position: absolute;
   left: 25px;
   top: -19px;
   z-index: 1;
}

#lowes:after {
/*height: 50px;
width: 175px;*/
content: "";
position: absolute;
left: 76px;
top: -55px;
   width: 0; 
   height: 0; 
   background: #15b6e5;
   border-bottom: 36px solid #fff; 
   border-left: 88px solid transparent; 
   border-right: 88px solid #15b6e5;
   z-index: 1; 
}

dabblet.html

<div id="lowes"></div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}