CSS使用clip-path绘制一个不规则边框

最新推荐文章于 2024-09-04 17:49:44 发布

深拥梦＄

最新推荐文章于 2024-09-04 17:49:44 发布

阅读量4.1k

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/pnjtvxcp/article/details/118054049

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip属性。

兼容性

现象

ui小姐姐设计了一款不规则边框，背景是使用渐变色背景图做为展示如下图:

使用clip-path剪切出边框路径：

clip-path: polygon(
                10px 0, 
                0 10px, 
                0px 100%,
                1px 100%,
                
                1px 11px, 
                11px 1px,                 
                calc(100% - 1px) 1px, 
                calc(100% - 1px) calc(100% - 11px),  
                calc(100% - 11px) calc(100% - 1px), 
                1px calc(100% - 1px),
                
                1px 100%, 
                calc(100% - 10px)  100%,  
                100%  calc(100% - 10px),  
                100% 0%
            );

可以看做是两个形状，先绘制外面一半，然后以一个点进入去绘制里面的形状，到达进入的那个位置

最后推荐一个Clippy — CSS clip-path 生成器可以在里面拖拖拽拽直接生成特殊形状

https://www.html.cn/tool/css-clip-path/