CSS3 includes a bunch of
transform options allowing things like rotation & distortion of element boxes. I wanted to apply that to achieve an effect inspired by mid 20th Century Googie signage.
My goal was to distort just the background behind an element whilst leaving the text alone. The text should also be able to "escape" from the background, for example letters can overflow beyond the background.
Naturally, being a CSS purist I also wanted to do all this without introducing non-semantic extra elements into the document.