Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Drawing diagonal lines in html5

Drawing diagonal lines in html5

Problem

Given a div of unknown dimensions how can I draw a solid line from one corner to the diagonally opposite corner without using JavaScript?

I thought the CSS3 calc() function might help me here but it seems you can't pull values from the height and width into another property (e.g. transform or background-image) I was hoping I could do something like:

transform: rotate ( calc(atan(height / width)) rad);

(The calculation is probably wrong but more important is that the syntax is totally invented.)

I am targeting Firefox for this project but would prefer something that will work in any modern browser.

Problem courtesy of: DJL

Solution

You can use an SVG:

With percentage coordinates, if needs be:

http://jsfiddle.net/qXKfN/2/

(Should work in FF, Chrome, Safari, and IE >= 9)


At various sizes in various browsers, the SVG might be pushed out of its container. One Solution is to set line-height: 0px;. Another solution, and probably the preferred solution, is to set position: relative; on the container and position: absolute; on the SVG.

http://jsfiddle.net/qXKfN/3/

Solution courtesy of: svidgen

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Drawing diagonal lines in html5

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×