标签搜索
隐藏侧边栏

25张图熟练掌握clip-path 看完就会!

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 38 阅读 / 2,168 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

不知道大家在开始学习CSS的时候,会不会经常遇到这样一道问题:如何实现一个三角形。类似这样的代码是不是很眼熟。嗯!看上去不是很复杂,但是代码是不是太多了!

直到CSS3的出现,clip-path带来了新的更简单的实现方式。

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

兼容性

看上去兼容性可能不太好,但是大部分的浏览器都部分支持这个属性。所以我觉得这个属性是可用的。

语法

内联/外部svg

clip-path: url(#c1);
首先我们在body标签种定义一个圆

然后定义一个div



然后在div中

clip-path: url(#myClip);

最后出来的效果就是将div裁剪成一个圆。


下面的是浏览器选中元素的效果。

margin-box| border-box|padding-box| content-box|fill-box|stroke-box|view-box

实测,这几个属性在chrome是不支持的,不过这几个属性基本上也不常用。
下面我们尝试两个例子:
先创建一个div

原图

浏览器选中后的图像

说一下这张图:黄色的是margin,黑色的是边框,深色的是padding,中间绿色是content。

举例1 :padding-box

clip-path: padding-box;

原图

通过这张原图,我们只能看到黑色的边框不见了。

我们来看一下,浏览器选中后的效果图。可以清晰的看见,padding和content部分是显示出来的

这个例子可能还是不太清晰的表达clip-path干了些啥。那么下面这个例子就比较清晰了。

举例2 :content-box
原图

通过这张原图,我们只能看到黑色的边框不见了,但是不能看到padding部分是否显示出来了。

我们来看一下,浏览器选中后的效果图。可以清晰的看见,padding跟上面的例子是不一样的颜色,呈现的是紫色,其实这是因为padding,并没有显示出来,被clip-path隐藏了。

inset| circle| polygon|path

inset

语法

inset( <shape-arg> {1,4} [round < border-radius >]? )

首先inset 接收 1到4个单位值,类似padding。

clip-path: inset(20px );

clip-path: inset(20px 50px);

clip-path: inset(20px 50px 100px);

clip-path: inset(20px 50px 100px 50px);

然后inset还接收一个round参数,round参数后面接收1到4个角度值,类似border-radius。

clip-path: inset(20px 50px 100px 50px round 20px );

四个角都是20px

clip-path: inset(20px 50px 100px 50px round 20px 10px );

左上角和右下角是20px

右上角和左下角是10px

clip-path: inset(20px 50px 100px 50px round 20px 10px 50px );

左上角20px

右上角和左下角是10px

右下脚是50px

clip-path: inset(20px 50px 100px 50px round 20px 10px 15px 25px);

inset属性组合比较多,写的时候请注意顺序。

circle

语法:

circle( [ <shape-radius> ]? [at x y ]? )

shape-radius 参数表示 r,即圆的半径。负值无效。此处的百分比值从参考框的使用宽度和高度解析为:sqrt(width2+height2)/sqrt(2)

at 参数定义圆的中心。如果省略,则默认为居中。x是距离左边的位置,y是距离上边的位置。当然你也可以使用类似 at top left这样的方位。

 clip-path: circle(50px at 100px 40px );

ellipse

语法

[ <shape-radius> rx ry ]? [at <position> ]? 

shape-radius 参数依次表示 rx和 ry,椭圆的 x 轴和 y 轴半径。任一半径的负值均无效。此处的百分比值根据宽度(对于 rx 值)和使用高度(对于 ry 值)进行解析。

position 参数定义椭圆的中心。如果省略,则默认为居中。

clip-path: ellipse(50px 20px at 100px 40px );

polygon

语法

[<fill-rule> x y,]

fill-rule 类似svg的填充。
polygon可以接收多个xy坐标。

下面列举几个常见图形的实现

菱形

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

clip-path: polygon(
          20% 0%,
          0% 20%,
          30% 50%,
          0% 80%,
          20% 100%,
          50% 70%,
          80% 100%,
          100% 80%,
          70% 50%,
          100% 20%,
          80% 0%,
          50% 30%
        );

0

评论区