Before and After Ribbon

Ribbon with Sprite and before and after.

by pavloschris

HTML

<h1>this is the header</h1>

CSS

h1{
    background: url('http://i49.tinypic.com/2zs1z79.png') 0 0 repeat-x;
    position:relative;
    display: inline-block;
    margin:0 25px;
    padding:0 10px;
    height:40px;
}

h1:before,h1:after {
    content:'';
    display: inline-block;
    position:absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background:inherit;
    background-position:100% 100%;
}
h1:before {
    left:-20px;
    background-position: 0 100%;
}