clip-path是css3中的一个新属性,允许我们使用裁剪的方式来创建元素的可显示区域(就相当于对元素来了次剪纸)

基本语法

div{
    clip-path: <clip-source> | [ <basic=shape> || <geometry-box> ] | none;
}

因为<clip-source>涉及到SVG,<geometry-box>目前只有Firefox实现,所以本文重点放在<basic-shape>

basic-shape

inset()


.box1{
    /* 在原矩形的基础上,上下左右皆向内10px */
    clip-path: inset(10px);
}
.box2{
    /* 在原矩形的基础上,上下向内10px 左右向内20px */
    clip-path: inset(10px 20px);
}
.box3{
    /* 在原矩形的基础上,上方向内10px 左右向内20px 下方向内30px */
    clip-path: inset(10px 20px 30px);
}
.box4{
    /* 在原矩形的基础上,上方向内10px 右边向内20px 下方向内30px 左边向内40px */
    clip-path: inset(10px 20px 30px 40px);
}

image-20220726104853777

.box1{
    clip-path: inset(10% 30px round 10px);
}
    
.box2{
    clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);
}

image-20220726105304861

cirlce()

.box1{
    clip-path: cirlce(50px)
}
.box2{
    clip-path: cirlce(6rem at right center)
}
.box3{
    clip-path: cirlce(closest-side at 5rem 6rem)
}
.box4{
    clip-path: cirlce(farthest-side)
}

image-20220726111239834

.box{
    float: left;
    shape-outside: circle(50%)
}

image-20220726111713240

ellipse()

.box1{
    clip-path: ellipse(90px 60px);
}
.box1{
    clip-path: ellipse(4rem 50% at right center);
}
.box1{
    clip-path: ellipse(closest-side farthest-side at 40px 70px);
}

image-20220726112832956

polygon()

.box1{
    clip-path: polygon(10% 30%, 90% 30%, 25% 90%, 50% 0, 75% 90%);
}
.box2{
    clip-path: polygon(evenodd, 10% 30%, 90% 30%, 25% 90%, 50% 0, 75% 90%);
}

image-20220726133519243

path()

MoveTo

PS: 命令声明后,其后续的参数都会按照此命令解释,直到下一个命令声明

M 20 20 30 30 等价于 M 20 20 M 30 30

LineTo
.box{
    clip-path: path(
                'M  20  240 \
                 L  20  80 L 160  80 \
                 L 160  20 L 280 100 \
                 L 160 180 L 160 120 \
                 L  60 120 L  60 240 Z')
}

image-20220726152159720

Cubic Bezier Curve
.box{
    clip-path: path(
               'M 50 200 \
             	C 100 200 100 50 150 50 \
        		S 200 200 250 200Z');
}

image-20220726155311339

Quadratic Bezier Curve
.box{
    clip-path: path(
            'M 50 150 \
             Q 100 50 150 150 \
        	 T 250 150 Z');
}

image-20220726163256105

Elliptical Arc Curve
.box2{
    /* 一个笑脸 */
    clip-path: path(evenodd,
                   'M 160 20 \
                    A 120 120 0 1 1 160 260 120 120 0 1 1 160 20 \
                    M 110 80 \
                    A 20 20 0 1 1 110 120 20 20 0 1 1 110 80 \
                    M 210 80 \
                    A 20 20 0 1 1 210 120 20 20 0 1 1 210 80 \
                    M 90 180 \
        			a 70 50 0 0 0 140 0 Z');
}

image-20220726164515701

close path

PS:clip-path可以用于过渡或者动画属性,前提是前后的clip-path参数类型需一致(包括参数中函数的参数个数)

DORAKIKA
我是一个喜欢折腾的前端工程师,对一切新鲜事物充满好奇,希望我的文章能给你带来思考和帮助
👋我是DORAKIKA
分享作者『DORAKIKA』发表的文章『学习一手CSS中的clip-path』https://blog.dorakika.cn/post/20220726/
© 请您在需要时著名本文内容来源信息,若在文末注明“参考、扩展”等字样涉及转载第三方内容,请您一同复制
JS中的事件循环
JS中的事件循环
JS中的事件循环机制、宏任务与微任务。
设计模式之单例模式
设计模式之单例模式
单例模式时一种较为简单的设计模式,在js中可使用全局对象进行创建,而无需像其他语言中需要先定义类再创建实例等复杂操作。