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

Akagi201
  • 519

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

回复
阅读 7.2k
3 个回答
Humphry
  • 16.4k

为了方便演示,用了可以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

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

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

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

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

宣传栏