Drawing diagonal lines in html5
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.
You can use an SVG:
With percentage coordinates, if needs be:
(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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here