Page 137 - css揭秘

有没有一种办法可以用 CSS 创建更加灵活的折角效果，并且完美满足
上述场景呢？

45°折角的解决方案

我们会从一个右上角具有斜面切角的元素开始，这个切角是由“切角效
果”一节中的渐变方案实现的。要用这个技巧在右上角创建一个大小为 1em
的斜面切角，代码会是这样的（简单的渲染效果如图 4-25 所示）：

background: #58a; /* 回退样式 */
background:
linear-gradient(-135deg, transparent 2em, #58a 0);
图 4-25
我们的起点：元素的右上角通过 走到这里，我们就已经完成了一半：接下来所需要做的就是增加一个
渐变实现了切角效果 暗色的三角形来实现翻折效果。实现方法是增加另一层渐变来生成这个三
角形并将其定位在右上角，这样就可以通过 background-size 来控制折角
的大小。

为了生成这个三角形，我们所需要的就是一个有角度的线性渐变，而这
个渐变的两个色标需要在正中央重合：

background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
图 4-26 no-repeat 100% 0 / 2em 2em;
第二层渐变用来生成折页三角形，
这里单独显示出来了；为了看清 在图 4-26 中，你可以看到只有这层背景会是什么样子。最后把这两层
文本所在的位置，我们把文字的 背景组合起来，应该就可以收工了吧？我们来试试看，不过要切记把折页部
颜色暂时从白色调成了浅灰色
分的三角形放在切角渐变之上：

background: #58a; /* 回退样式 */
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);

图 4-27 在图 4-27 中可以看到，结果并不是我们所期望的那样。为什么它们的
把这两层渐变组合到一起并不能 尺寸不匹配呢？它们可都是 2em 啊！
产生我们所期望的结果
原因在于（正如我们在“切角效果”一节中所讨论的那样）第二层渐变
中的 2em 折角尺寸是写在色标中的，因此它是沿着渐变轴进行度量的，是对
角线尺寸。另一方面，在 background-size 中的 2em 长度是背景贴片的宽
度和高度，是在水平和垂直方向上进行度量的。
为了将这两者对齐，我们需要选择以下任意一项进行调整，选择哪一项
取决于我们最终想保留哪一方的尺寸设置。

106 第 4 章 视觉效果

඀ࠡ JOEC