Page 94 - css揭秘
P. 94
此外，这个方法还可以很好地适应非正方形的图片，如图 3-22 所示。
啊，现代的 CSS 真是乐趣无穷啊……
试一试 play.csssecrets.io/diamond-clip
CSS 变形
http://w3.org/TR/css-transforms 相关规范
CSS 遮罩
http://w3.org/TR/css-masking
CSS 过渡
http://w3.org/TR/css-transitions
12 切角效果
背景知识
CSS 渐变，background-size，“条纹背景”
难题
把角切掉不仅是为了省钱，它还是一种非常流行的设计风格，不论是在
印刷媒介还是在网页设计中都是如此。它最常见的形态是把元素的一个或多
个角切成 45°的缺口（也称作斜面切角）。尤其是在最近，当扁平化设计的风
头完全盖过拟物化之后，这种效果就愈发流行了。当切角效果只应用在元素
的某一侧，且切角的尺寸刚好达到元素高度的 50% 时，就会得到一个箭头 图 3-23
形状，这在按钮和面包屑导航中的应用非常普遍（参见图 3-23）。 一个使用了切角效果的按钮，
箭头形状很好地强调了它自身
但是，目前的 CSS 仍然无法做到只用一行简单直观的代码就生成这样 的含义
的效果。这导致绝大多数网页开发者倾向于使用背景图片来达到目的，比如
12 切角效果 63
ࠡ JOEC
