Page 138 - css揭秘

„ 如果要保留对角线的 2em 长度，就要将 background-size 乘以 2 。
„ 如果要保留水平和垂直方向上的 2em 长度，就要用切角渐变的角标
位置值除以 2 。
由于 background-size 需要把这个长度重复两次，而且绝大多数的
CSS 度量都不是在对角线上进行的，因此第二种方案更加合适。色标的位置
2 图 4-28
值将变成 = 2 ≈ 1.414 213 562 ，我们可以将其取整为 1.5em：
2 在改变了蓝色渐变的色标位置之
后，我们的折角效果最终达成
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 1.5em, #58a 0);
（因为它只是背景），这将会破坏
折角的整体效果。
正如图 4-28 所示，我们最终得到了一个美观、灵活、简约的折角效果。

试一试 play.csssecrets.io/folded-corner

其他角度的解决方案

现实生活中的折角往往不是精确的 45°。如果我们希望它看起来更真实一
些，可以稍稍改变一下角度，比如 -150deg 可以产生 30°的切角。不过，如果
我们只是改变斜面切角的角度，那么表示翻折部分的三角形并不会跟着改变，
这将导致整体效果被破坏，如图 4-29 所示。此外，调整这个三角形的尺寸并
不容易。它的尺寸并不是由角度来定义的，而是由宽度和高度来定义的。我
们怎样才能得到需要的宽度和高度呢？好的，这回该请出三角函数了！
我们当前的代码是这样的：

background: #58a; /* 回退样式 */
background:
linear-gradient(to left bottom, 图 4-29
transparent 50%, rgba(0,0,0,.4) 0) 改变切角的角度将会破坏整体效果
no-repeat 100% 0 / 2em 2em,
linear-gradient(-150deg,
transparent 1.5em, #58a 0);

①
在图 4-30 中可以发现，当我们知道这两个 30-60-90 直角三角形 的某
1
一条直角边的长度时，基本上就可以算出斜边的长度。 图4-31 所示的三角函
数示意圆告诉我们，只要知道了直角三角形的角度和某一条边的长度，就可
以通过正弦函数、余弦函数以及勾股定理计算出另外两条边的长度。我们在
图 4-30
切角渐变的放大图（图中用灰色
① 30-60-90 直角三角形表示两个锐角分别为 30°和 60°的直角三角形。 标出的锐角为 30°）

19 折角效果 107

඀ࠡ JOEC