本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想
带切角的矩形：
该图来源于（奇思妙想）
Css代码：
.notching{
width: 160px;
height:160px;
}
.notching{
background:
linear-gradient(135deg, transparent 15px, deeppink 0)
top left,
linear-gradient(-135deg, transparent 15px, deeppink 0)
top right,
linear-gradient(-45deg, transparent 15px, deeppink 0)
bottom right,
linear-gradient(45deg, transparent 15px, deeppink 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
1、建立一个矩形
2、利用线性渐变实现切角，科普一下代码知识：
linear-gradient Css3的线性渐变
(135deg, 渐变角度，看张图秒懂
transparent 15px, 透明 15px的宽度
deeppink 0) 深粉色， 这里的0是渐变到底
top left; 渐变填充 上左
3、根据第一个写好的（上左）渐变：linear-gradient(135deg, transparent 15px, deeppink 0)top left
然后复制粘贴，调整角度同样的去填充好上右，下左，下右。OK，现在还看不错啥效果。
4、最后一步，设置下background-size: 50% 50%; background-repeat: no-repeat;
（background-size: 50% 50%;【解释一下：把每个方向的填充看成一个小方块，每个填充的小方块X,Y都占据了其50%，也就是每个小方块的是x*50%，y*50%这样子，所以，呢，为了让他刚好填充合适就是50%了，如果是40%你会发现小方块太小了，填充不慢，如果是100%你会发现太大了，占满了都。】
最后一个就是不要重复了 ，肯定的，重复就做不出这个效果了。）
不规则切角矩形：
（该图灵感来源于上面的第四步）
这是我在无意研究第四步的background-size时发现的，也算是一个小聪明吧。
按照上面的步骤，当你把background-size设置成90% 90%时，你就发现上面这个图形了，其实原理就是，当每个小方块占到原图的90%时，严重超出了原本界定的框线，然后就看到了超出的一小部分，其实更多的部分由于重叠在一起了，所以就没能看出来。
如果我们把每个填充的方向分开来看，也许你就瞬间秒懂了：
在比如说我们给每个方向的渐变调整下颜色：
（然后呢就看到了，其实是因为太大重叠在一起，超出边界而产生的）
实际上，也就是使其超出一点，刚好合适，就实现了上面的不规则切角矩形了。