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

With the combination of CSS shapes, positioning, :before and :after selectors I've managed to make the container expandable to any content. However, this approach only works in modern browsers and it seems that there's no proper solution without js. Also, the use of svg could be really handful in this case but again you're limited to the browser compatibility.

Here is the demo using pure CSS: http://jsfiddle.net/qaWKX/

EDIT

The use of svg turned out to be useless without an extra JS function. So I dropped this approach. However, the only proper solution relies on CSS3 but without the use of :before and :after selectors. My previous approach was relying on creating pseudo elements that hide both sides of the h3 title. Hiding is not enough when there's no solid color for the background.

With this logic I needed to have a background that will combine transparency and solid fill. The answer was on CSS3 linear-gradient background.

In details: 1. I rotated the h3 title 2. I masked the top area with its container (top:-value or margin-top:-value) 3. I set 2 linear-gradient background images to each side

Here's the demo: http://jsfiddle.net/P5gLE/1/