4 answers
points
Yes, but only with newest webkit/firefox builds. For webkit, use this:
-webkit-transform: rotateY(45deg);
In your CSS.
Things normally can only have their sides vertical or horizontal.
You are better off using a background image of a diagonal line to simulate this.
points
You could use SVG/canvas to do this cross-browser. Check out the Raphael JS library which can do this kind of thing, and much more: http://raphaeljs.com/
point
Without the Richs solution with the transform-property you're out of luck. Current browser rendering engines doesn't support that I the formatting model and the flow of the document aren't cut out to handle weird shaped boxes. It doesn't know how to draw the bounding box and calculate collision and flow.
I mean, if you've ever worked with ActionScript in Flash you no doubt have encountered the limitations of the bounding box and shape flag. Forms are square no matter what. To make the hitbox/collision area of a circle truly round you'll have to use math color hit testing or the like. I recon that's not gonna be supported in web browsers for some time :)
The answer to the queston "How is the documents elements/boxes supposed to relate to a diagonal line across the page?" just isn't here yet.
But, if you're just after the visual effect a background image or other here mentioned methods might be perfect for you.
points
You can get this effect in IEs and Firefox 3.5/Opera 10 using css transformations for the last two and filters for IEs
You can gracefully degrade for other browsers using the Modernizr . What it does is, output a set of classes to the body element, e.g. "csstransforms" if the browser supports css transforms, "no-csstransforms" if the browser does not support css-transforms.
If you use the snook.ca approach with this, you need to be careful about how you specify your css to make sure your IE specific filters are not overridden by the modernizr classes.
