又是努力搬砖给老板换宝马的一下午，让我先看看设计稿上UI又给我出了什么难题吧。
这个背景...不太规则呢...
我的第一反应是用伪元素写个遮罩，好像不太行，让我们来分析一下这个Z层。
目前看来这个Z层好像有3层
- 最下面的是黑色带点点的背景
- 中间是深蓝色的不规则背景框，还带有透明度，能看到下面的点点
- 最上面的是青色描边的按钮，也带有透明度,也能看到下面的点点
这样的活，如果在中间那层加遮罩，会影响最上层看到点点，算是破坏UI了吧
没啥思路...求救群友吧...
clip-path
这是群友甩给我的回答，赶紧百度看一下这是个什么
官方解释：clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
裁剪，一听就靠谱，在看了一些资料后发现裁剪一共几个属性
inset 向内部剪裁
circle 按照圆形裁剪
ellipse 按照椭圆形剪裁
polygon 按照多边形裁剪
一看就知道 什么圆形、内部肯定弱爆了，直奔polygon去了
polygon能实现这种裁剪，没跑了，就是这个
具体的代码格式是这样
clip-path: polygon(0 0, 0% 100%, 100% 100%);
类似于接收3个点坐标一样，前面是x坐标，后面的是y坐标，最少需要3个点，毕竟两个点只能成线，3个点才能成面，像刚才这样剪切，分别是左上角、右上角、右下角，裁出来的是这样一个三角形
在查阅资料的过程中还发现一个非常不错的网站 bennettfeely.com/clippy/
这个网站可以在线制作裁剪图形，并且直接生成代码，像这样
这样设计稿上的不规则边框也就非常简单了，实现效果
clip-path针不戳！
