css直角线_CSS秘密花园:折角效果

《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。

问题

为元素的一个角落添加样式，让它看起来像是折起来的(通常是右上角或是左下角)，有不同程度的逼真效果，是这几年来一个非常受欢迎的效果。

近来，有几个纯CSS的解决方案，第一个是在2010年的时候由伪元素大师——Nicolas Gallagher发布的。它们通常是通过添加两个三角形在左上角：一个用于翻页，一个用于模糊主元素的角。这些三角形通常是通过旧的border技巧来创建的。

图注：几个早期的csstricks.com上的折角效果的设计，在每篇文章的右上角都可以看到

这些解决方案在当时是令人印象深刻的，现在它们却在下面这几种情况下有非常多的限制以及不足：

当我们的元素的背景不是纯色，而是一个图案、纹理、照片、渐变，或其它任何这样的背景图像

当我们想要一个不同于45°的角，或是一个旋转折叠

有没有一种方法可以用CSS直接创建一个更灵活的折叠角效果，而且在这些情况下也不会失效的？

针对45°角的解决方案

我们从一个右上角带有斜角的元素开始，在第三章第四小节中提到的基于渐变的解决方案上创建。为了用这种技术创建一个1em的右上斜切角，代码如下：

background: #58a; /* Fallback */

background:linear-gradient(-135deg, transparent 2em, #58a 0);

效果如下：

图注：我们的起点：一个右上角带有斜切角的元素，通过一个渐变完成

在这时候，我们已经完成了一半的工作：我们需要做的是添加一个暗色的三角形用于翻页效果。我们需要通过添加另一个渐变来创建三角形，因此我们将根据需求重新调整background-size的值和右上角的position。

要创建三角形，我们需要做一个倾斜的线性渐变：

background:linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em;

图注：我们为了折叠三角形的完成的第二个渐变，此处的文本显示的是淡淡的灰色而不是白色，这样你就能大概看到文本所处的位置

你可以在上图中看到只有这个渐变背景的效果。最后一步是把它们结合起来，这个我们会做，对吧？我们来试试，确保三角形翻页是在我们的缺角渐变上的：

background: #58a; /* Fallback */

background:

linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,

linear-gradient(-135deg, transparent 2em, #58a 0);

正如你在下图中看到的，结果和我们预期的并不一样。为什么大小不匹配呢&#