CodePen

HTML

            
              <h1>this is awesome.</h1>

<!-- see: http://css-tricks.com/line-on-sides-headers/ - incorporated improvements from Joshua Hibbert's comment to drop the <span> --> 
            
          
!
via HTML Inspector

CSS

            
              h1 { display: table; width: 100%;
   white-space: nowrap; }
/* svg background */
h1:before, h1:after { content: '';
  width: 50%;
  
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB2ZXJzaW9uPSIxLjEiCiAgIHdpZHRoPSIxMiIKICAgaGVpZ2h0PSIxMiIKICAgaWQ9InN2ZzIiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0Ij4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaWQ9ImxpbmVhckdyYWRpZW50Mzc3MSI+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc3MyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDM3ODEiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNjMGM1Y2U7c3RvcC1vcGFjaXR5OjEiCiAgICAgICAgIG9mZnNldD0iMC4wNSIgLz4KICAgICAgPHN0b3AKICAgICAgICAgaWQ9InN0b3AzNzc5IgogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojYzBjNWNlO3N0b3Atb3BhY2l0eTowIgogICAgICAgICBvZmZzZXQ9IjAuMDUiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4MyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MCIKICAgICAgICAgb2Zmc2V0PSIwLjEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4NSIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwLjEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4NyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwLjE1MDAwMDAxIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDM3NzUiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmZjkwMjM7c3RvcC1vcGFjaXR5OjAiCiAgICAgICAgIG9mZnNldD0iMSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTA0MC4zNjIyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDAsMTA0MC4zNjIyIDEsMCAtMSwxIHoiCiAgICAgICBpZD0icGF0aDM3OTEiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMCwxMDQ0LjM2MjIgMCwxIDUsLTUgLTEsMCB6IgogICAgICAgaWQ9InBhdGgzNzk1IgogICAgICAgc3R5bGU9ImZpbGw6I2MwYzVjZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDxwYXRoCiAgICAgICBkPSJtIDgsMTA0MC4zNjIyIC04LDggMCwxIDksLTkgeiIKICAgICAgIGlkPSJwYXRoMzc5OSIKICAgICAgIHN0eWxlPSJmaWxsOiNjMGM1Y2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8cGF0aAogICAgICAgZD0iTSAxMiwwIDAsMTIgMSwxMiAxMiwxIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzAiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gNCwxMiAxLDAgNywtNyAwLC0xIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzIiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gOCwxMiA0LC00IDAsMSAtMywzIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzQiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogIDwvZz4KPC9zdmc+Cg==) repeat-x center center;
  
  display: table-cell;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; }
h1:before {
  border-right: 10px solid transparent; }
h1:after {
  border-left: 10px solid transparent; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................