不规则多边形绘制（切角效果、任意效果） css clip-path使用

最新推荐文章于 2024-03-30 00:21:59 发布

羡阳公子

最新推荐文章于 2024-03-30 00:21:59 发布

阅读量760

点赞数 1

分类专栏： html css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_44537625/article/details/129176285

版权

css 同时被 2 个专栏收录

8 篇文章 3 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

clip-path可以裁切很多种不同形状的图形，这里讲clip-path 中polygon（）函数属性

切角效果

<div id="demo"></div>
<style>
#demo{
width:100px;
height:200px;
background:red;
clip-path: polygon(15px 0 , 100% 0, 100% 100%, 0 100%,0 15px)
}
</style>

效果图：
在这里插入图片描述
如图所示： polygon(15px 0 , 100% 0, 100% 100%, 0 100%,0 15px)其实代表了5个点
其中有5组坐标
15px 0 代表图中序号1
100% 0 代表图中序号2
100% 100% 代表图中序号3
0 100% 代表图中序号4
0 15px 代表图中序号5
注意：确定好点后，根据点的顺序连接，打乱顺序就会得到其他图形。