Auto-resizing skewed background in CSS (+ images?)

Question

I\'m going to convert this PSD image to CSS. I\'ve multiple h2s in multiple pages, so the inner text lenght and background-color may vary. Therefore the background should automa

Answer 1

One easy solution I can think of is using 3 elements(I would use divs) for the three different bottom angles of the shape, having the left and right ones have a fixed size and the middle one simply scale with the text(headline) contained in it. Maybe not the most elegant solution, but it would definitely work. A downside is that you need a lot of images, especially if you want to have different coloured shapes. (I know of no way to colour a background image).

Though, if the space around the shape has a solid background colour, you could actually set the background colour of the 3 elements to the colour you want and have the actual images you use have the same colour as the background as negative space, being transparent where you want the actual shape.

Also, if you really do not want more elements than you need to, you can always use the :after and :before selectors to fake it.