横跨页面的斜线

Question

我正在寻找关于在主要内容区域后面的页面上实现斜线斜线的最佳方法的建议。

我想在没有图像或额外标记的情况下实现此目的，并且能够控制斜杠的角度，如果浏览器宽度发生变化，它将被保留。

我原本以为:after伪选择器可以用于此，虽然SVG可能是更好的选择吗？

浅灰色斜线的粗略设计：

Answer 1

你可以尝试在css3中使用一些边框，这是一个很好的例子：http://www.cssportal.com/css3-shapes/。 请参阅“左下角三角形”。

Answer 2

看看这个JSFiddle：

  

http://jsfiddle.net/anzhA/

或者你还有其他一些例子：

  

http://jsfiddle.net/anzhA/1/

诀窍是将css边框和width / height设置为0：

border-width: 0 500px 500px 0;
border-color: transparent white transparent transparent;
border-style: solid;
height:0;
width:0;
background:rgba(0,0,0,0.2);

这将仅显示边框结构的右下角形状。它是三角形。

实施例

  

首先，普通的CSS边框有两种颜色。

  

其次，如果您将第二种颜色替换为透明并将元素的width/height设置为0，并删除左下边框，则会得到结果