Html + Css: How to create a auto-resizing rotated background?
- by Sebastian P.R. Gingter
Hi,
image a complete black web page. On this web page is a 100% size white div that fills the whole page. I'd like to rotate this div by -7 degrees (or 7 degrees counter-clock wise).
This will result in the black background being visible in triangles on the edges, just like you had placed a piece of paper on a desk and turned it a bit to the left.
Actually this can be done with some css and it's working quite well (except for IE).
The real problem now is:
I'd like to have a normal, non-rotated div element on top of that to display the content in, so that only the background is rotated.
Rotating a contained div counterwise doesn't work though, because through the two transformations the text will be blurry in all browsers.
How can I realize that?
Best would be a solution workiing in current Webkit browsers, FF3.5+ and IE7+. If only IE8+ I could live with that too.
