认识CSS属性之clip-path_html/css_WEB-ITnose

Web 页面以长方形为主，相比之下，平面媒体在形状方面更具多样性。造成这种差异的原因之一就是，在 web 页面开发中缺少像平面媒体中那样合适的工具。

本文会带你认识 clip-path 属性，这个属性使你能够隐藏元素的某部分，可见区域由设置的参数值所控制。我们先学习基本概念，而后介绍 clip-path 语法，最后来看下更高深的概念。

基本概念

Clipping （裁剪）就是从某物上修剪下一块。在前端中，clipping 就是一种整体或部分地隐藏页面元素的操作。关于 clipping，本文还会提及其它两个概念：clipping path（剪裁路径）和 clipping region（剪裁区域）。

Clipping path 是用来裁剪元素的路径，可以标记出 clipping region。clipping path 可以是基础形状或者是复杂的多边路径。而 clipping path 围起来的区域就是 clipping region 了。

浏览器会裁剪掉 clipping region 以外的区域，不仅是背景及其它类似的内容，也包括 border、text-shadow 等。更赞的是，浏览器不会捕获元素 clipping region 以外的 hover、click 等事件。

即使如今一些特定元素不受长方形限制，但实际上元素周围的内容还是会认为元素是原始形状（长方形）的，并按此进行文档流的布局。要想使周围元素根据元素裁剪后的形状进行布局，可以使用 shape-outside 属性。这个属性的详细信息可以移步 这篇 SitePoint 教程 。

注意，请不要将这个属性与 clip 属性 混淆。一般情况下请避免使用 clip 属性，因为它受诸多限制并且只支持长方形裁剪。

语法及使用

使用这个属性的正确语法如下：

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

上述属性值包括：

clip-source 可以是内、外部的 SVG 元素的 URL 引用。

basic-shape 可以是 CSS Shapes 说明 中定义的基础形状函数。

geometry-box 是可选的参数。此参数和 basic-shape 函数一起使用时，可以为 basic-shape 的裁剪工作提供参考盒子。如果 geometry-box 由自身指定，那么它会使用指定盒子的形状作为裁剪的路径，包括任何（由 border-radius 属性提供的）角的形状。我们稍后会详细说明。

现在来看看下面使用基础形状函数的 CSS 代码：

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

这段代码会将所有的图片裁剪为菱形。但是为什么图片会被裁剪为菱形而不是梯形或平行四边形呢？这取决于函数中的顶点值。下图说明了生成多边形裁剪路径的规则：

多边形裁剪路径图

 

每个点的第一个坐标值决定了它在 x 轴上的位置，第二个坐标值指定了它在 y 轴的位置，所有点是顺时针绘制的。比如菱形最右边的点，它位于 y 轴下方一半处，所以它的 y 坐标是 50%。同时这个点位于 x 轴的最右侧，所以它的 x 坐标是 100%。其它点的坐标同理可得。

利用 geometry-box 裁剪元素

当裁剪 HTML 元素时，geometry-box（或参考盒子）可以是 margin-box、border-box、padding-box 或 content-box。geometry-box 的用法如下：

.clip-me {  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;  margin: 10%;}

在上例中，元素的 margin-box 会作为参考，来决定裁剪点的实际位置。点（10%，10%）是 margin-box 的左上角，所以 clip-path 的定位会根据此点进行计算。

裁剪 SVG 元素的情况下，geometry-box 可以是 fill-box、stroke-box 和 view-box。view-box 值在没有指定的情况下，默认采用最近的 SVG 视口作为参考盒子。

clip-path 的使用

这个属性可以用来做一些有趣的事。首先，它可以改善文本内容。让我们来看一下下面的图片，标题的背景和第二段都使用了 clip-path 属性：

clip-path 示例

使用渐变或其它类似技术可以很容易地实现第一个背景。但是没有 clip-path 的帮助，生成第二个背景就没那么容易了。注意，消息框样式背景底部的线不是水平的，而有一点倾斜。使用 clip-path 实现这个效果只需一行简单的 CSS 代码：

.p-msg {  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);}

背景有 7 个顶点，这在多边形的 clip-path 中有所体现。也许你会问我是怎样得出这些坐标的。这个问题我会留给读者们解决，这样可以帮助你们更好地理解概念。打开下面的 CodePen 可以看到实现代码：

你也可以用这个属性将图片裁剪成不同的形状，并加点 CSS 来将它们排列的更加炫酷。画廊中的缩略图不必是长方形的，用户头像的形状也可以随心所欲。本文将图片做成菱形的。因为所有的图片都是基础菱形的，所以可以共用 clip-path 的值。下面是最右侧图片的 CSS 代码：

.right {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  position: relative;  top: -352px;  left: 256px;}

使用 clip-path 的图片效果如下：

clip-path 还可以做更多的事——你可以做出奇形怪状的按钮，或给导航菜单添加好玩的 hover 效果，只有想不到，没有做不到！

添加动画

这个属性也可以与动画相结合。但是必须记住，最后形状的顶点数必须和初始形状的顶点数相同。这很重要，否则浏览器会不知道在哪添加多余的顶点（或是从哪移除顶点）。如下 CSS 代码为梯形添加了动画：

@keyframes polygons {  25% {    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);  }  50% {    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);  }  70% {    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);  }}

在动画的最后一段，梯形会变成三角形。如上文提到的，我们不能改变顶点的数目还指望着动画会是平滑的，改变顶点数目会造成动画过渡生硬。为了解决这个问题，我在最后一个多边形中把前两个顶点设置为相同的，这样四边形就可以完美的转换为三角形了。

浏览器支持性

IE 和 Edge 不支持这个属性。Firefox 仅部分支持 clip-path （它只支持 url() 语法）。但是 47 以上的版本，激活 Firefox 的 layout.css.clip-path-shapes.enabled 选项就可以支持这个属性了。

Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。不幸的是，它们还不支持外部的 SVG 形状。更多浏览器支持性信息可以访问 Can I Use 。

总结

本文介绍了有关 clip-path 的基本内容，可以帮助你入门。学习使用这个属性并不会花费太多的时间，但是创造性的使用就需要多多练习了。当浏览器广泛支持此属性时，你就可以使用 clip-path 制作出酷炫的效果了。

此外还有两款工具值得介绍——Bennett Feely 的 clippy 和 CSS Plant 的 clip path 生成器 。它们可以为你创造复杂的多边形路径带来方便。

你用clip-path做出过什么炫酷的作品吗？请在留言中提供链接。

打赏支持我翻译更多好文章，谢谢！

打赏译者

打赏支持我翻译更多好文章，谢谢！

任选一种支付方式

关于作者：古鲁伊

立志做一名有格调的程序媛 个人主页 · 我的文章 · 11