css - 跨页面的斜线

Question

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

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

我最初认为:after伪选择器可以用于此，虽然也许 SVG 会是一个更好的选择？

浅灰色斜线的粗略设计：

Answer 1

You can try using some borders in css3 here's a good example: http://www.cssportal.com/css3-shapes/. See "Triangle Bottom Left".

Answer 2

看看这个 JSFiddle：

http://jsfiddle.net/anzhA/

或者你其他一些例子：

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

诀窍是将css边框和宽度/高度设置为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 边框 2 种颜色。

 

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

Answer 3

尝试这个：

background: -webkit-linear-gradient(
      rgba(232, 232, 232, 1),
      rgba(135, 60, 255, 0) 0%
    ),
    -webkit-linear-gradient(-45deg, rgba(231, 229, 229, 0.9) 55%, rgba(229,230,216,1)
          0%);