写点什么

CSS 奇思妙想之 - 利用 CSS 裁剪(clip-path)完成各种图形

作者:肥晨
  • 2023-04-21
    江苏
  • 本文字数:1111 字

    阅读完需:约 4 分钟

在日常开发当中,如果想要开发多边形,一般都需要多个盒子或者伪元素的帮助,有没有一直办法能只使用一个盒子实现呢?有的:css 裁剪

clip-path 介绍

css 裁剪(clip-path)这个属性平时率非常低。但是其实 clip 并不是 CSS3 的新属性,很早就开始出现了。CSS 裁剪的这一概念最早是在 CSS 2.1 时代由 clip 属性引入,但该属性的限制非常多。裁剪初期只能应用于绝对定位的元素,并且只能裁剪成矩形。而在 CSS3 中,提供了强大的 clip-path 属性,突破了 clip 属性的众多限制。clip-path 能够让你指定一个网页元素的显示区域,而不是显示全部。在过去有个等效的属性 clip,但在新的 CSS 规范中,它已经被标志为 deprecated,用新的 clip-path 代替。

clip-path 到底是什么?

clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。clip-path 是一个 css3 新属性 , 一般用在 svg 元素上 , 但是也可以作为普通元素裁剪使用。

clip-path 属性

clip-path 属性可以使用四种裁剪函数:circle()、ellipse()、inset()和 polygon()。  下面用一个例子来演示这四个函数的效果,将它们分别应用到四个 div 元素中,样式如下,得到的形状如下图所示。

circle():修建矩形的可视范围


clip-path: inset(10px 20px 30px 40px);
复制代码

ellipse():修建圆形的可视范围


clip-path: circle(50%);
复制代码

inset():修建椭圆形的可视范围


clip-path: ellipse(50% 30%);
复制代码

polygon():修建任意多变形的可视范围


clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px);
复制代码

案例

CSS 实现一个鼓样式


如果使用其他方法实现,需要使用到多个盒子,例如:



像图中这样使用 3 个盒子。如果使用 clip-path,只需要一个盒子+circle()。


div {            background-color: blue;            height: 200px;            width: 400px;            clip-path: circle(50%);
}
复制代码
CSS 实现一个杠铃样式


如果使用其他方法实现,需要使用到多个盒子,例如:



像图中这样使用 3 个盒子。如果使用 clip-path,只需要一个盒子+polygon()。


div {            width: 200px;            height: 300px;            background-color: red;            clip-path: polygon(0 0,                    0% 42%,                    5% 42%,                    5% 58%,                    0 58%,                    0 100%,                    100% 100%,                    100% 58%,                    95% 58%,                    95% 42%,                    100% 42%,                    100% 0);
}
复制代码

总结

使用该属性能够完成的图形可能性非常高,许多样式不需要复杂的 dom 才能实现。只可惜现在还有部分浏览器不支持该功能。

发布于: 刚刚阅读数: 3
用户头像

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台:InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域:前端 公众号:农民工前端

评论

发布
暂无评论
CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形_三周年连更_肥晨_InfoQ写作社区