I want to make an hr line diagonal? How do I do this? Is there a way i can turn it

4 answers

This was chosen as the best answer

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.

Answered almost 8 years ago by Rich Bradshaw
danwellman 5600

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/

Answered almost 8 years ago by danwellman

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.

Answered almost 8 years ago by Jens Hedqvist

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.

Answered almost 8 years ago by Divya Manian