在html5中绘制对角线

Question

给定一个未知维度的div,如何在不使用JavaScript的情况下从一个角到对角线对角绘制实线？

我认为CSS3 calc()功能可能对我有帮助,但似乎你不能将高度和宽度的值拉到另一个属性(例如转换或背景图像)我希望我可以做类似的事情:

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

(计算可能是错误的,但更重要的是语法是完全发明的.)

我针对这个项目瞄准Firefox,但更喜欢适用于任何现代浏览器的东西.

Answer 1

你可以使用SVG:

<svg style='width: 200px; height: 200px;'>
    <line x1="0" y1="200" x2="200" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

使用百分比坐标,如果需要:

<svg style='width: 100%; height: 100%;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

在各种浏览器中的各种大小,SVG可能会被推出其容器.一种解决方案是设置line-height: 0px;.另一种解决方案,也许是首选解决方案,是设置position: relative;在容器和position: absolute;SVG上.