Page 136 - css揭秘
P. 136
19 折角效果
背景知识
CSS 变形，CSS 渐变，“切角效果”
难题
把元素的一个角（通常是右上角或右下角）处理为类似折角的形状，再
配上或多或少的拟物样式，这种效果已经成为一种非常流行的装饰手法。
目前，我们已经拥有了一些实用的纯 CSS 实现方案，其中某些技巧早
在 2010 年 就 由 伪 元 素 大 师 Nicolas Gallagher（http://nicolasgallagher.com/
pure-css-folded-corner-effect）发表了。这些方法的基本原理通常是在右上角
增加两个三角形：一个三角形用来体现折页的形状，另一个白色的三角形遮
住元素的一角，用来模拟翻折所产生的缺口。这两个三角形通常都是由经典
的边框技巧来生成的。
图 4-24
css-tricks.com 网站的某个早期设
计就在每个文章区块的右上角采
用了折角效果
尽管这些方法在过去确实光彩夺目，但在今天看来却有一些局限性，而
且在以下场景中还会暴露出明显的缺陷。
当折角元素之下的背景不是纯色，而是一幅图案、一层纹理、一张
照片、一幅渐变或其他任何一种背景图像时。
当我们想要一个 45°以外的（旋转的）折角时。
19 折角效果 105
ࠡ JOEC
