Ribbon effect headings in CSS
Quick and pretty effect for a heading tag. The only image in use is the stitch effect at the top and bottom of the ribbon.
The pointy bits use :before and :after to position a thick border over the ends, with a coloured border and two transparent ones creating a triangle.
Because of the fudge for the ends, this won’t work on highly patterned backgrounds, but still useful in some cases no doubt. Need to see whether this can be implemented using some sort of mask for the ends…
On github…
