I am trying to come up with a solution for a diagonal line using HTML
and CSS. I rely on javascript as a solution for this predicament.
I have tried the following items:
- Basic SVG with given width/height such as the following:
<svg xmlns="http://www.w3.org/2000/svg";><line x1="0" y1="100%"
x2="100%" y2="0" style="stroke: black;"/></svg>
This approach works, but Internet Explorer < 9 is not compatible with SVG.
- CSS text-decoration:
text-decoration: line-through; adds a line, but has no way to show
it as a diagonal.
- Rotated div (or other block level element):
Background or border can create a line.
Mozilla, Webkit, and even Opera browsers support arbitrary
rotations in degrees.
Internet Explorer uses
object.filters.item("DXImageTransform.Microsoft.BasicImage").Rotation
which only supports rotations of 90 degree intervals.
- Unicode U+2571
This does form a diagonal line, but there is no way to stretch an
individual character in CSS (of which I am aware).
- Diagonal border hacks:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/
http://nettuts.s3.amazonaws.com/1008_diagonal/index.html
This works in some sense, but there is no "line" per se, there is
simply diagonal clipping.
- Canvas
HTML5 with canvas does allow for drawing of diagonal lines, but is
not supported in older browsers.
Does anyone have any ideas or suggestions that might help with this?
Thanks,
Jack
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
