clip-path 基本介绍
clip-path
是一个CSS属性,剪切路径,允许用不同的剪切方式创建元素的可显示区域,区域内的内容可以展示,区域外的内容则隐藏。
基本语法:clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
。
其中,属性值分四类:
- clip-source
使用类函数url()
引用SVG
的<clipPath>
元素。 - basic-shape
一些基本形状,使用类函数形式创建一个形状,可取值包含:圆形(circle)、椭圆(ellipse)、多边形(polygon)、矩形(inset)、任意路径(path)。 - geometry-box
可选;此属性值必须与basic-shape
属性值共同作用,为剪切形状提供参考盒子,默认值为border-box
。
该属性兼容性存在一定问题,在chrome浏览器下无法正常使用,慎用。 - none
默认值none
,除此外,还有inherit
、initial
等CSS全局值。
使用如下,
<div class="app"></div>
.app {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background-color: #333;
clip-path: circle(50%);
}
以上代码,将给 .app
元素设置一个背景色为黑灰色的圆形的剪切区域:
使用 clip-path 绘制图形
上面代码和图片,展示了一个圆形的形状,基于 clip-path
的形状属性值 basic-shape
。
接下来,首先我们先了解下 basic-shape
的各属性值函数的基本用法:
- 圆形
circle()
接受一个半径长度和圆心位置信息,剪切成圆形 - 椭圆
ellipse()
接受两个半径长度和圆心位置信息,剪切成椭圆 - 多边形
polygon()
接受一组顶点位置信息,剪切成多边形状 - 矩形
inset()
接受 top、right、bottom、left 四个方向的偏移值,还可以设置圆角,剪切成矩形 - 任意路径
path()
接受SVG路径字符串,剪切成不同形状
有了这几种基本的形状函数,我们就可以创建各种各样的图形。
实现一个三角形
使用多边形属性值 polygon
实现一个三角形,只需要设置三个坐标点参数,就可以很方便的创建一个三角形状了。
<div class="triangle"></div>
.triangle {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background-color: #f00;
animation: triangle 8s linear infinite;
}
@keyframes triangle {
0% {
clip-path: polygon(100px 0px, 200px 200px, 0px 200px);
}
25% {
clip-path: polygon(200px 100px, 0px 200px, 0px 0px);
}
50% {
clip-path: polygon(100px 200px, 0px 0px, 200px 0px);
}
100% {
clip-path: polygon(0px 100px, 200px 0px, 200px 200px);
}
}
如上代码所示,实现了四个方向的三角形的动画效果,采取的是顺时针旋转四次,依次展示:
以后如果代码要实现三角形角标,就可以使用它了。
除了 polygon
外,使用 path
属性值同样能够实现三角形,下面的代码就是实现了一个三角形:
clip-path: path("M100,0 L0,200 L200,200");
而想要使用 path
实现一个同样的圆形,也可以,代码如下所示:
clip-path: path("M 100 0 A 100 100 0 1 1 100 200 A 100 100 0 1 1 100 0");
实现一个箭头效果
同样是使用多边形属性值 polygon
,设置好箭头所需要的坐标顶点数据,就能够简单的绘制一个箭头。
.arrow {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background-color: #f00;
clip-path: polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 40% 70%, 40% 100%, 0% 50%);
}
以上CSS代码,polygon的顶点值使用的百分比的相对值,同样有效,绘制下图所示的箭头:
使用 path
属性值实现箭头同样可以,以下CSS代码就是实现和上图一样的箭头形状:
clip-path: path("M 80 0 L 80 60 L 200 60 L 200 140 L 80 140 L 80 200 L 0 100");
要设置不同的方向,调整顶点坐标值即可。
实现一个 × 符号
使用 ×
作为关闭按钮图标符号,也是我们常用的UI样式,也可以通过 clip-path
属性轻松实现该符号形状。
.triangle {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
background-color: #f00;
clip-path: polygon(10% 0%, 0% 10%, 40% 50%, 0% 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0%, 50% 40%);
}
仍然是通过多边形进行定义,只要沿着 ×
的各个顶点,设置对应的位置信息,效果可见下图:
下面是 path
的实现:
clip-path: path("M 2 0 L 0 2 L 8 10 L 0 18 L 2 20 L 10 12 L 18 20 L 20 18 L 12 10 L 20 2 L 18 0 L 10 8");
形状的实现,就先到这里,反正只要我们愿意花时间,总能通过 clip-path
创建想要的形状,下面我们看下其他的用法。
注意事项
阴影与边框
注意,使用 clip-path
定义形状时,并不会处理 border
边框和 box-shadow
阴影等属性,比如创建圆形时,与 border-radius
的差异就很明显。
下面我们分别实现两个圆形:
.circle {
display: inline-block;
width: 200px;
height: 200px;
background-color: #ccc;
border: 3px solid red;
box-shadow: 0px 0px 10px #00f;
}
.circle1 {
clip-path: circle(50%);
}
.circle2 {
border-radius: 50%;
}
从上图可以看到,
使用 border-radius
时边框阴影都跟随圆形显示完整;
而使用 clip-path
则完全不同,阴影并不展示,边框则也是剪切的方式展示4段。
fixed定位问题
在使用 clip-path
剪切父元素时,如果使用 fixed
定位的内部元素,在脱离了当前父元素的范围后,将无法显示。
同样使用上面的代码,我们在html中做一些改动:
<div class="circle circle1">
<div class="text">clip-path</div>
</div>
<div class="circle circle2">
<div class="text">border-radius</div>
</div>
定义文本字符串的css属性,使用 fixed
定位:
.text {
position: fixed;
top: 230px;
}
得到的效果图如下所示,在 clip-path
剪切中将无法显示文本,而 border-radius
则完整显示文本。
动效问题
上文的代码中,我们在三角形的实现中,已经使用了 animation
使用动画效果,表现正常,但需要注意:
- 在一次
@keyframes
设置中,如果使用clip-path
属性,则他的属性值应该使用同一个函数,即必须都使用polygon
; - 不能一个时间段使用
polygon
另一个时间段使用path
,如果这样做,将没有动画效果。
即下面这种写法是不被允许的:
/** polygon 函数与 path 函数同在一个动效中使用,将不会有动画效果,只会生硬的切换 */
@keyframes triangle {
0% {
clip-path: polygon(100px 0px, 200px 200px, 0px 200px);
}
50% {
clip-path: path("M 200 100 L 0 200 L 0 0");
}
}
使用 transition
处理动效也会存在同样的问题,下面我们看一个具体的示例。
<img class="img" src="../css项目/animate.jpg"/>
.img {
clip-path: circle(50%);
transition: all 1s;
}
.img:hover {
clip-path: circle(100%);
}
当我们在正常状态下使用 circle
剪切一个圆形以后,hover
状态下也使用该函数,则效果正常:
但是,当我们在 hover
状态下使用 none
或其他函数时,则没有动效,直接切换:
.img:hover {
clip-path: none;
}
如上图所示,与前面正常动效相比,这次就是直接切换状态,没动画效果。
clip-path 的其他用法
使用 clip-path
属性除了可以创建不同的形状以外,还可以在其他方面使用,如作为图片裁剪框、隐藏页面元素等等。
图片裁剪框
图片裁剪的具体实现,之前博文已有介绍,当时的实现方式,就是使用 clip-path
属性来定义的图片裁剪框,并且使用在JavaScript中动态修改定位位置信息来实时修改裁剪框的尺寸和位置信息。
具体的代码,详见 一步步实现裁剪功能。
隐藏页面元素
根据上面的对 clip-path
属性的了解,我们知道在剪切形状区域内的内容是可见的,在剪切区域外的内容不可见。
如果我们把设置一个元素的剪切区域为0,则该元素的所有内容都将在区域外,即是不可见的,在实现上也非常简单。
clip-path: circle(0%);
clip-path: inset(50%);
clip-path: polygon(0 0);
使用不同的形状函数值,只要保证没有剪切区域就行。
当然,这种方式的隐藏,元素仍然会占据在页面上的当前空间,只是在视觉上看不见。