CSS
body {
background-image: -webkit-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.05) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.05) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.05) 50%);
background-image: -o-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.05) 50%);
background-image: linear-gradient(left, transparent 50%, hsla(0,0%,0%,.05) 50%);
background-size: 1.5em 1.5em;
padding: 1.5em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
color: #333;
display: table;
}
h1:after,
h1:before {
background-image: -webkit-linear-gradient(transparent 40%, #87a 40%, #87a 45%, transparent 45%, transparent 55%, #87a 55%, #87a 60%, transparent 60%);
background-image: -moz-linear-gradient(transparent 40%, #87a 40%, #87a 45%, transparent 45%, transparent 55%, #87a 55%, #87a 60%, transparent 60%);
background-image: -ms-linear-gradient(transparent 40%, #87a 40%, #87a 45%, transparent 45%, transparent 55%, #87a 55%, #87a 60%, transparent 60%);
background-image: -o-linear-gradient(transparent 40%, #87a 40%, #87a 45%, transparent 45%, transparent 55%, #87a 55%, #87a 60%, transparent 60%);
background-image: linear-gradient(transparent 40%, #87a 40%, #87a 45%, transparent 45%, transparent 55%, #87a 55%, #87a 60%, transparent 60%);
content: '';
display: table-cell;
width: 50%;
/* Everything below allows us to have a little bit of space between the title and the decoration */
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding;
}
h1:after {
border-left: .75em solid transparent;
}
h1:before {
border-right: .75em solid transparent;
}