css 切角 多边形 菱形 不规则

CSS的魅力还是很强大的，虽然我还只懂一点点的，看见大佬写出来的炫酷页面，还是很羡慕啊！
下面记录一下，CSS 画出多边形

line-gradient: 渐变的方法

background: #0F3A3C;
background: linear-gradient(135deg, transparent 10px, #0F3A3C 0) top left,
linear-gradient(-135deg, transparent 0, #0F3A3C 0) top right,
linear-gradient(-45deg, transparent 10px, #0F3A3C 0) bottom right,
linear-gradient(45deg, transparent 0, #0F3A3C 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
效果图：

image.png

该方法有一个坑，因为size是50%，当长度为奇数的时候，中间会出现一条白线。如果你的元素大小固定且值为复数，可以使用此方法。
如果大小不固定，推荐使用以下方法。

clip-path:使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏
inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset；
circle(): 定义一个圆 ；
ellipse() : 定义一个椭圆 ；
polygon(): 定义一个多边形 。

具体用法看这里：https://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/

这里用到的是 polygon：通过设定坐标点，连接点到点后形成多边形
注意点：
1. 如果使用百分比，那长宽记得设定
2. 即从一个方向，顺时针或者逆时针绘制一个多边形，值为（x y, x y,...）,坐标轴是这样的：
3. 通过 clac 计算，可以得到更精准的图形

image.png

兼容性：

image.png

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

效果图：

image.png

background: #0F3A3C;
-webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 0 100%,
0 10px
);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 0 100%,
0 10px
);
效果图：

image.png

这里有一个工具，绘制完图形，会自动形成代码。
工具： https://bennettfeely.com/clippy/

祝好 哈哈哈