CSS clip-path 剪切属性

发表于 | 更新于: | 分类于 ， | 评论数： | 阅读次数:

📚 CSS clip-path 剪切

clip-path 属性（替代已经弃用的clip属性）用于裁剪元素，支持逗号赋值。

语法

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

<clip-source>:url(resources.svg#c1);
<geometry-box>:clip-path: margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box;
<basic-shape>:clip-path: inset() | circle()| ellipse() | polyon() | <shape-box>

预定义函数

在左上角为（0%，0%），右下角为（100%，100%）的坐标轴中，调用预定义的函数设置裁剪边框：

  • inset( 上右下左的边距 round 上右下左圆角 )裁剪內置矩形

    1
    clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0);

    內置矩形裁剪分析图

  • circle(半径 at 圆心坐标) 裁剪圆形

    1
    clip-path:circle(50% at 50% 50%);
![圆形裁剪分析图](2019-07-16-CSS-clip-path/circle.JPG)

  • ellipse(长短轴半径 at 圆心坐标) 裁剪椭圆形 

    1
    clip-path:ellipse(25% 50% at 50% 50%);

    椭圆裁剪分析图

  • polyon(顶点坐标) 裁剪多边形
    定义多边形各个顶点坐标，直线勾连顶点圈出裁剪区域。需要过渡效果时必须注意，例如裁剪三角形：

    1
    clip-path:polygon(0% 100%, 50%  0%,100% 100%);

    三角形裁剪分析图

    另外如果需要过渡效果就必须注意：polygon点坐标的数目在动画的前后数目要一样。

👀 效果对比

多边形裁剪polygon

多边形 效果图 代码
三角形
polygon(0% 100%, 50% 0%,100% 100%)
正方形
polygon(0% 0%, 0% 100%,100% 100%,100% 0%)
正五边形
polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%)
正六边形
polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)
正七边形
polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%)
正八边形
polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%)

动画效果

demo1

1
2
3
4
5
6
7
8
.demo1 {
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    clip-path: circle(50px at 60px 60px);
    width:120px;height:120px;
}
.demo1:hover {
    clip-path: circle(55px at 60px 60px);
}

demo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.demo2 {
    transition:0.5s;
    clip-path: polygon(0% 50%, 10% 40%, 10% 48%, 90% 48%, 90% 40%, 100% 50%, 90% 60%, 90% 52%, 10% 52%, 10% 60%);
    height:100px;
    background:black;
    position:relative;
}
.demo2:before{
    content: '';
    position: absolute;
    top:40%;
    left:15%;
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background-color: #fff;
}
.demo2:hover {
    clip-path:polygon(0% 53%, 0% 47%, 20% 30%, 60% 30%, 90% 50%, 100% 65%, 100% 35%, 90% 52%, 60% 70%, 20% 70%);
}

🌵最后

0%