Css-深入学习之切角

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【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%你会发现太大了，占满了都。】

最后一个就是不要重复了，肯定的，重复就做不出这个效果了。）

不规则切角矩形：

（该图灵感来源于上面的第四步）