如何用svg来画出div的两条对角线, 如果用css也可以.

Question

没有找到非常好用的方法.

Answer 1

为了方便演示，用了可以resize的textarea展示效果：

1x 使用svg line

http://jsfiddle.net/wvj9xkyu/1/

textarea {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>');
}

在这里，X1和Y2之类的属性都支持百分比，因而可以实现。

2x 使用svg path及viewBox

http://jsfiddle.net/wvj9xkyu/

textarea {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 10 10" preserveAspectRatio="none"><path d="M 0 0 L 10 10" stroke="black" stroke-width="1"/></svg>');
}

使用svg视口来拉伸10*10的viewBox是因为d属性只允许使用绝对值。
路径本身有点拉伸，不管啦 XD
只有webkit支持preserveAspectRatio="none"，兼容性不管啦 XD

Answer 2

只要两条线的话直接用 css 也行，before 和 after 两个画两条线，然后而 rotate 旋转个正负 45度（具体度数自己慢慢调），最后顶多再绝对定位微调一下位置就可以了。

Answer 3

如果只是为了这个斜线的话，那么可以用两个三角覆盖在一个矩形的div中，然后中间空出一条线；或者两个三角叠加，定位偏差一点……然后或者可以旋转啊什么的也试试。

不想折腾就是图片最简单了。

然后就是SVG或者用canvas画一条斜线……