[译] 学习 CSS clip

整体来说网页主要是由矩形所构成的,另一方面印刷品则具备相对多样性。造成这样差异的原因有很多,不过其中一个即是缺少合适的工具。
这篇文章主要会介绍 clip-path 这个 css 的模式规则可以让我们遮掉元素的局部,就是不显示出来。达成这项功能背后的原理就是我们可以透过它去定义可视区,类似于遮色片的概念。我们将从基础开始然后涵盖语法,进一步理解进阶的概念。

clip 意思是剪裁,意味着修剪某物的外型。在网页设计的情况下,是让我们可以去决定某个元素完全隐藏或局部隐藏。而在这篇文章中另外两个相关的概念是 clipping pathclipping region

clipping path 剪裁路径意思就是我们使用它去修剪一个元素,透过路径组成 clipping region 剪裁范围。这个范围或称区域可以是简单的形状或复杂的多边形。剪裁范围就是透过一个封闭的剪裁路径所组成的,这与您使用 Illustrator 的钢笔工具绘制形状的概念是一样的。

任何在形状范围外的东西都会被浏览器裁掉。不只包含背景其他像是内容,borders,text-shadow 效果都会被裁掉。此外浏览器甚至不会处理范围外的事件像是 hover, click 等。

即便我们设定的元素不再是矩形,但周围的元素排列方式仍然维持原本矩形的布局。为了达成周围的元素跟着裁切的形状,我们可以使用 shape-outside 属性。

同时记住不要把旧的模式 clipclip-path 等搞混了。旧有的属性只支持矩形的裁切。

使用

目前这个模式规则的语法如下:

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

上面语法表示的是:

现在,让我们来思考下面这段 css 程序

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

这段设定将会裁切所有图片为一个菱形。不过为什么图片会变成菱形呢?为什么不是梯形或平行四边形?您应该猜到了,这是因为形状取决为我们定义的顶点。下面图片说明了建立裁切形状时使用的惯例

每个座目标第一个参数指定了该座目标 x 轴,第二个参数则是 y 轴。所有的点依照顺时钟的方向绘制。依照这个规则与上图我想您应该理解了。

CodePen

使用 geometry-box 裁切元素

当我们要裁切 HTML 元素时,geometry-box 可以是下列值 margin-box, border-box, padding-box, content-box

1
2
3
4
.el {
clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
margin: 15px;
}

上面的范例,margin-box 会决定我们得座标点从 margin 的范围开始,而 (10%, 10%) 就是我们实际内容的左上角,因此 clip-path 也必须对应计算。

SVG 元素的状况下,参数可能是 fill-box, stroke-box, view-box 。其中 view-box 会最接近整个 svg 的可视范围。

clip-path 的使用方式

关于这个属性有很多有趣的使用方式。第一个就是它可以美化文字内容。您可以观察一下下图,我们透过背景色与裁切所营造出的感觉不再受限与单纯的方形。

简单说您可以简单的使用背景色,渐层等等您已经熟悉的属性然后搭配 clip-path ,例如上面粉红色背景类似泡泡对话框的效果,从前我们可以要透过 border 组成三角形在透过 transform 和调整位置等属性去完成,现在换成 clip-path 只需要一行,我们可以轻松完成任何不规则的形状。

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

当然您可以用来裁切图片使其变成各种不同的形状,您的相片图库的页面不再只能用矩形呈现。下面是一个范例建议您使用 Chrome 玩玩

CodePen

动画

这个属性也能够被用在动画上。唯一要注意的是初始时和最后结果的座标数量要一致。

1
2
3
4
5
6
7
8
9
10
11
@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%);
}
}

为了维持动画的顺畅,基本上座标数量最好保持一致,至于形状的变化您可以透过重叠座标来实现。

奇技淫巧

另外我们还可以透过 clip-path 来隐藏元素,不过这个效果类似于 visibilityopacity 该位置空间仍会被占据。

1
2
3
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

关于浏览器支持度

这个属性暂时在 IE, Edge 是不能使用的,Firefox 也还没完全支持只支持部分语法,在 v47 还得要套过 layout.css.clip-path-shapes.enabled 来开启。Chrome 的话要加上 -webkit- prefix。

总结

总结来说关于 clip-path 的重点大略为

  • 设定的座标点(clip-path)需要能够封闭,围成一个形状(clip-range),这个形状就是显示的区域。
  • 周围的元素仍需要靠 shape-outside 来修正。
  • geometry-box 用来设定座标轴范围,用在 HTML 和 SVG 参数是不同的。
  • 动画的部分座标点数量需维持一致。
  • 目前大多数的浏览器支持度还不够。
  • clippy座标产生器可以协助我们取得座标。

原文参考