Page 93 - css揭秘

可以在图 3-20 中看到，这段代码确实可以产生我们期望的结果。

试一试 play.csssecrets.io/diamond-images

裁切路径方案

上面的方法确实可以奏效，但它基本上是一个 hack。这个方法需要一层
额外的 HTML 标签，这不够简洁；代码本身也不够直观；它甚至还不够健
壮——如果我们碰巧要处理一张非正方形的图片，这个小把戏就会原形毕露
（参见图 3-21）。
不完全支持
事实上，我们还有一个更好的办法来完成这个任务。它的主要思路是
使用 clip-path 属性。这个特性也是从 SVG 那里借鉴而来，已经可以应用
在 HTML 元素上了（至少对于支持的浏览器来说是这样的）。而且它的语法
也很友好、可读性不错，完全不像 SVG 里的原版语法那样会把人逼疯。它
最大的缺陷在于（在写作本书时）其浏览器支持程度还很有限。但是，它
可以平稳退化（只是没有裁切效果而已），因此它至少有资格成为我们的备
选方案。
你可能比较熟悉图像处理软件（比如 Adobe Photoshop）中的裁切路径
功能。裁切路径允许我们把元素裁剪为我们想要的任何形状。在这个例子
中，我们将会使用 polygon()（多边形）函数来指定一个菱形。实际上，它
允许我们用一系列（以逗号分隔的）坐标点来指定任意的多边形。我们甚至
可以使用百分比值，它们会解析为元素自身的尺寸。代码如下所示：

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

图 3-21 信不信由你，它就是这么简单！它产生的效果跟图 3-20 是完全一样的，
如果图片不是正方形，基于变形 但完全不需要多一层 HTML 标签和八行难以破译的 CSS 代码，只需要清清
的方案就会严重地崩坏 爽爽的一行代码就可以搞定。

clip-path 所能创造的奇迹还不止于此。这个属性甚至可以参与动画，
只要我们的动画是在同一种形状函数（比如这里是 polygon()）之间进行
的，而且点的数量是相同的。因此，如果我们希望图片在鼠标悬停时平滑地
扩展为完整的面积，只需要这样做：

img {
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
transition: 1s clip-path;
}

img:hover {
图 3-22 clip-path: polygon(0 0, 100% 0,
clip-path 方法可以很好地适应 100% 100%, 0 100%);
非正方形的图片 }

62 第 3 章 形状

඀ࠡ JOEC