跨页面的斜线答案

【问题标题】：Diagonal slash across page跨页面的斜线
【发布时间】：2013-08-21 01:17:00
【问题描述】：

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

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

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

浅灰色斜线的粗略设计：

【问题讨论】：

您需要什么样的浏览器支持？
下到 IE8 是理想的，虽然不是很重要。

标签： css svg

【解决方案1】：

试试这个：

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%);

【讨论】：

【解决方案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，并去除左下边框，就会得到结果

【讨论】：

谢谢，我知道 CSS3 边框方法，请参阅第一个答案。

【解决方案3】：

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

【讨论】：

是的，这是我最初的想法，用于伪选择器。很可能是最好的方法，只是想看看有没有更有趣的解决方案！
我敢打赌，画布、JavaScript 等还有更有趣的解决方案……但为什么要让事情复杂化呢？
好吧，这就是为什么我说它很可能是最好的解决方案。除非有任何替代方法是更好的解决方案，否则我会这样做。
也建议这样做.. SVG 将是另一个好的解决方案（如您所料），但 css 三角形可能更好。
这方面的一个限制似乎是它需要固定的宽度/高度。理想情况下，我希望它始终是浏览器的完整高度。