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

I don't think it is possible to do with just the h2. The problem occurs with the different angles of the skewed sides, meaning you need a 'container' for the skewing and transforms.

Given your example, I came up with the following:

http://jsfiddle.net/Cbx2q/1/

As you will see, this is has a couple of maintenance problems:

• 'Magic Numbers' - these will need tweaking dependent on the skew + size you choose.
• Font rendering with the transform is somewhat worse.

Otherwise, it seems to work. The best solution outside of using pseudo-elements and CSS3 is likely to stick with plain old images for the background of each menu item.