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%你会发现太大了，占满了都。】

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

不规则切角矩形：

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

这是我在无意研究第四步的background-size时发现的，也算是一个小聪明吧。

按照上面的步骤，当你把background-size设置成90% 90%时，你就发现上面这个图形了，其实原理就是，当每个小方块占到原图的90%时，严重超出了原本界定的框线，然后就看到了超出的一小部分，其实更多的部分由于重叠在一起了，所以就没能看出来。

如果我们把每个填充的方向分开来看，也许你就瞬间秒懂了：

在比如说我们给每个方向的渐变调整下颜色：

（然后呢就看到了，其实是因为太大重叠在一起，超出边界而产生的）

实际上，也就是使其超出一点，刚好合适，就实现了上面的不规则切角矩形了。