菜单

银河官方网站:聊聊Clip-Path

2019年11月3日 - 银河官方网站
银河官方网站:聊聊Clip-Path

聊聊Clip-Path

2016/09/19 · 基础技术 ·
clip-path

本文作者: 伯乐在线 –
Damonare
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

认识CSS属性之clip-path

2016/06/20 · CSS ·
clip-path

本文由 伯乐在线 –
古鲁伊
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:Nitish
Kumar。欢迎加入翻译组。

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

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

前言

图片是一个网站必不可少的元素,而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作,通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题,实际项目中可能用的比较少,包括博主自己也只是用过几次剪切,很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢,必须深入探究!

基本概念

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

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

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

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

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

正文

语法及使用

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

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

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

上述属性值包括:

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

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

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

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

JavaScript

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

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

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

银河官方网站 1

多边形裁剪路径图

 

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

Flilter

filter有十种特效来处理图片,博主只放几种特效的样例给大家看一下:

照片反色效果:

银河官方网站 2

照片褐色效果:

银河官方网站 3

照片阴影效果:

银河官方网站 4

十种特效源码:

-webkit-filter:opacity(.6);//透明度 filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊 filter:blur(10px);
-webkit-filter:invert(1); filter:invert(1);
-webkit-filter:saturate(3);//照片饱和度 filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度 filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色 filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋转 filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度 filter:brightness(.5);
-webkit-filter:contrast(2);//对比度 filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//阴影
filter:drop-shadow(10px 10px 10px #ccc);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
-webkit-filter:opacity(.6);//透明度
filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊
filter:blur(10px);
-webkit-filter:invert(1);
filter:invert(1);
-webkit-filter:saturate(3);//照片饱和度
filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度
filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色
filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋转
filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度
filter:brightness(.5);
-webkit-filter:contrast(2);//对比度
filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//阴影
filter:drop-shadow(10px 10px 10px #ccc);

但实际上这个属性兼容性很低:

银河官方网站 5

截止博主发文日期,Filter的兼容性如上图,我们可以看到IE是完全不支持的,Edge也是部分支持。这可能也是Filter没法用在项目中的原因之一了。感兴趣的读者可以Copy博主代码本地测试一下,或是参照MDN|Filter了解。博主不在这里做过多的说明了。

利用 geometry-box 裁剪元素

当裁剪 HTML 元素时,geometry-box(或参考盒子)可以是
margin-boxborder-boxpadding-box
content-boxgeometry-box 的用法如下:

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

1
2
3
4
.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-boxstroke-box
和 view-boxview-box 值在没有指定的情况下,默认采用最近的 SVG 视口作为参考盒子。

clip&clip-path

这两个属性正是今天的重头戏,博主曾在从隐藏元素谈起提起过,但并没做深入解释。是的,它可以用来隐藏元素,当然也就能处理图片了。

clip这个属性我相信会有很大一部分人不知道,因为这个属性使用率非常的低,因为很多情况下我们会直接重新切一张新图出来代替而不会去剪裁已有的图片,但实际上这个属性用在CSS
sprite简直就如同神器一般,因为在很多情况下background-position并不符合我们的需求,比如,有时我们希望Sprite图片可以延迟滚动加载,或者是可以很轻松的右键图片另存为…或是其它background-position没法满足的情景。
废话不多说,看样例:
银河官方网站 6

position:absolute; clip:rect(50px 250px 250px 50px); /* IE6, IE7 */
clip:rect(50px,250px,250px,50px);

1
2
3
position:absolute;
clip:rect(50px 250px 250px 50px); /* IE6, IE7 */
clip:rect(50px,250px,250px,50px);

银河官方网站 7

注意,元素定位position必须是absolute或是fixed的,兼容IE6,IE7需要将值之间的逗号去掉。另外,react(top,right,bottom,left);四个值分别是相对于图片左上角为原点的坐标值。Clip基本所有的浏览器都支持,可以放心使用。

让人放弃它的原因无外乎:

  • clip
    只对绝对定位的元素有效对于position:relative和position:static无效
  • clip 只能用于矩形,即rect()函数

其实clip在HTML5中已经被废弃了(依然可用),取而代之的是clip-path。本来clip还有一个circle(圆),但基本没有浏览器实现这个属性值,只有rect()可是使用,可能W3C也是等不下去了吧,直接推出了一个更牛逼的属性——clip-path,这个属性起初是SVG里面的然后被挪用到了CSS里面。关于SVG博主有时间会再另外介绍,这里按下不表。效果图:
银河官方网站 8
银河官方网站 9

读者可以在这里自行体验

兼容:现在为止IE 和 Edge 不支持这个属性,Firefox 仅部分支持 clip-path

Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。
银河官方网站 10
clip-path兼容性甚至比前面说到的filter还差,所以很难真正使用起来。更多使用效果戳这里和这里

说一下它的四个属性值:

开始使用clip-path

在开始使用clip-path绘制图形,或者说裁剪图形之前,有两点需要大家注意:

  • 使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续线段,若线段彼此有交集,裁剪区域就会有相减的情况发生,当然如果你特意需要这样的效果除外。
  • 如果绘制时采用比例的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有差距,使用像素绘制就不会有这样的现象。

我们就拿上面途中的六边形作为polygon()函数示例:

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

1
2
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

效果图:

银河官方网站 11

讲解:

银河官方网站 12

每个点的第一个坐标值决定了它在 x 轴上的位置,第二个坐标值指定了它在 y
轴的位置,所有点是顺时针绘制的。其实一个
polygon()就能满足所有的形状需要了,有自定义的API用更加方便不是么。

注意:inset()这个真的坑,按说同样裁剪成方形应该是和clip的rect一样用法,可不一样!

 

//Clip的rect position:absolute; clip:rect(50px 250px 250px 50px);
//clip-path clip-path: inset(50px 50px 50px 50px); -webkit-clip-path:
inset(50px 50px 50px 50px);

1
2
3
4
5
6
//Clip的rect
position:absolute;
clip:rect(50px 250px 250px 50px);
//clip-path
clip-path: inset(50px 50px 50px 50px);
-webkit-clip-path: inset(50px 50px 50px 50px);

本文使用图片是300*300的。

很明显:

 

clip:rect(50px 250px 250px 50px); =clip-path: inset(50px 50px 50px
50px);

1
2
clip:rect(50px 250px 250px 50px);
=clip-path: inset(50px 50px 50px 50px);

好大的一个坑….

clip-path 的使用

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

银河官方网站 13

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%); }

1
2
3
.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; }

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

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

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

结束语

相信随着时代发展,clip-path会慢慢被浏览器厂商接受的。
本文有任何错误,欢迎评论留言。

打赏支持我写出更多好文章,谢谢!

打赏作者

添加动画

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

JavaScript

@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%);
} }

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%);
  }
}

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

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

银河官方网站 14
银河官方网站 15

1 赞 2 收藏
评论

浏览器支持性

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

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

关于作者:Damonare

银河官方网站 16

知乎专栏[前端进击者]

个人主页 ·
我的文章 ·
19 ·
         

银河官方网站 17

总结

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

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

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

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

银河官方网站 18
银河官方网站 19

1 赞 收藏
评论

关于作者:古鲁伊

银河官方网站 20

立志做一名有格调的程序媛

个人主页 ·
我的文章 ·
34

银河官方网站 17

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图