Basic introduction to clip-path
clip-path
It is a CSS property, clipping path, which allows different clipping methods to create the displayable area of the element, the content in the area can be displayed, and the content outside the area is hidden.
Basic syntax: clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
.
Among them, attribute values are divided into four categories:
- clip-source references the element using
the class function .url()
SVG
<clipPath>
- basic-shape
Some basic shapes, using class function to create a shape, possible values include: circle (circle), ellipse (ellipse), polygon (polygon), rectangle (inset), arbitrary path (path). - geometry-box
is optional; this attribute value must work withbasic-shape
the attribute value to provide a reference box for the clipping shape, and the default value isborder-box
.
There are some problems with the compatibility of this attribute, and it cannot be used normally under the chrome browser, so use it with caution .
The default value of nonenone
, in addition, there are CSS global values such asinherit
, and so on.initial
Use as follows,
<div class="app"></div>
.app {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background-color: #333;
clip-path: circle(50%);
}
The above code will set a circular clipping area with a black-gray background color for .app
the element :
Draw graphics using clip-path
The above code and picture show a circular shape, based on the value clip-path
of the shape attribute basic-shape
.
Next, let's first understand the basic usage basic-shape
of :
- Circle
circle()
Accept a radius length and center position information, cut into a circle - Ellipse
ellipse()
Accept two radius lengths and center position information, cut into an 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);
使用不同的形状函数值,只要保证没有剪切区域就行。
当然,这种方式的隐藏,元素仍然会占据在页面上的当前空间,只是在视觉上看不见。