CSS3:clip-path
旧的clip
旧的css也提供了一个clip属性,但这个属性只能用于裁剪一个矩形,其本质是根据overflow:hidden隐藏掉了裁剪外的区域,使用:
clip:rect(<top>,<right>,<bottom>,<left>);
上右下左的偏移量,都是从元素盒子边缘算起,如图所示。
注意:clip属性只能在元素设置了“position:absolute|fixed”时起作用。
clip-path
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
其默认值是none。
另外简单介绍clip-path几个属性值:
clip-source: 可以是内、外部的SVG的<clipPath>元素的URL引用
basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。具体的说明可以看CSS Shapes中有关于说明。
geometry-box: 是可选参数。此参数和basic-shape函数一起使用时,可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定,那么它会使用指定盒子形状作为裁剪的路径,包括任何(由border-radius提供的)的角的形状。
使用clip-path有两点要注意:
1) 使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续线段,若线段彼此有交集,裁剪区域就会有相减的情况发生,当然如果你特意需要这样的效果除外。
2) 如果绘制时采用比例的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有差距,使用像素绘制就不会有这样的现象。
示例:
1 2 3 | img{ clip-path:polygon( 50% 0% , 100% 50% , 50% 100% , 0% 50% ); } |
举个栗子:
CCS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | body { margin : 20px auto ; text-align : center ; font-family : 'Lato' ; max-width : 640px ; } h 1 { margin-bottom : 100px ; font-size : 1.8em ; } div { display : inline- block ; margin : 50px 0px ; width : 250px ; height : 250px ; border-radius: 200px ; -webkit-filter: grayscale( 0.9 ); cursor : pointer ; } div:hover { -webkit-filter: none ; } div:hover .text { opacity: 1 ; } .text { position : absolute ; background : rgba( 200 , 0 , 0 , 0.5 ); padding : 20px 0 ; top : 90px ; width : 250px ; opacity: 0 ; text-align : center ; color : white ; font-size : 1.4em ; } . left .text { background : rgba( 0 , 0 , 200 , . 5 ); } . right .text { background : rgba( 200 , 100 , 0 , 0.5 ); } . bottom .text { background : rgba( 0 , 200 , 0 , 0.5 ); } . top { background : url ( 'http://t.imgbox.com/KXaGvTFB.jpg' ); -webkit-clip-path: polygon( 50% 0% , 100% 50% , 50% 100% , 0% 50% ); background- size : contain; position : relative ; left : -125px ; top : -130px ; } . left { background : url ( 'http://t.imgbox.com/LHPFYSYE.jpg' ); -webkit-clip-path: polygon( 50% 0% , 100% 50% , 50% 100% , 0% 50% ); background- size : contain; position : relative ; } . right { background : url ( 'http://t.imgbox.com/tlgvPjwn.jpg' ); -webkit-clip-path: polygon( 50% 0% , 100% 50% , 50% 100% , 0% 50% ); background- size : contain; position : relative ; top : -352px ; left : 256px ; } . bottom { background : url ( 'http://t.imgbox.com/R7h6VtZr.jpg' ); -webkit-clip-path: polygon( 50% 0% , 100% 50% , 50% 100% , 0% 50% ); background- size : contain; position : relative ; top : -220px ; left : -126px ; } |
HTML
1 2 3 4 5 | < h1 >Images clipped with < code >clip-path</ code > Property</ h1 > < div class="left">< p class="text">SPORTS</ p ></ div > < div class="top">< p class="text">TECHNOLOGY</ p ></ div > < div class="right">< p class="text">FOOD</ p ></ div > < div class="bottom">< p class="text">NATURE</ p ></ div > |
【運用 clip-path 的純 CSS 形狀變換】这篇文章详细介绍了多边形的绘制方法。
更多不规则图形案例戳这里:http://bennettfeely.com/clippy/
使用geometry-box裁剪:
geometry-box的值可以是shape-box|fill|stroke|view-box。
shape-box应用于html元素与CSS Shapes的引用框概念类似,可以阅读Understanding Reference Boxes for CSS Shapes一文作了解。
其他三个值则是运用于svg元素上。
兼容性
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥