CSS背景切角的实现研究

问题

我们在写前端页面过程总，会碰到这种情况，UCD给的一个带切角的背景给我们当一个模块的背景，然后这个模块的宽高又都不是固定的，这种情况下，如果改变模块的大小，切角的角度就会发生变化，如下图所示（原图切角为45度）：

1.PNG

本来是45度的切角，经过减少模块的高度后，切角变成了上图的模样

三明治解决方案

一般碰到这种情况，如果模块的宽度不变，只有高度变化的话，我们会将该模块的背景变成一种上中下三层的结构，上下两层带角度的背景高度不变，中间层高度可变，这样就解决了了模块在高度变化的时候，上下切角可以不受影响的问题：

2.PNG

这种方案虽然可以解决问题，但是写法复杂，需要写额外的dom元素和样式

linear-gradient解决方案

这种解决方案的原理是通过角度渐变实现，将渐变的开始部分设置为透明。通过设置背景图4个方向的渐变实时切角，通过这种方式保持45度的角度不改变，关键css样式如下：

background:linear-gradient(-45deg,transparent 45px, #000 0) bottom right,
    linear-gradient(45deg,transparent 45px, #000 0) bottom left,
    linear-gradient(135deg,transparent 45px, #000 0) top left,
    linear-gradient(-135deg,transparent 45px,#000 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;

效果如下：

3.PNG

这种方案可以很方便的调节切角的大小，切角的角度，而且在宽高均变化的时候都可以做到固定的切角，十分好用；不足：背景只能是纯色或渐变色，无法对图片进行切角

clip-path解决方案

clip-path翻译过来就是剪切路径，从字面就能看出这个属性的作用，我们可以通过这个属性，自定义裁剪出图形的可视区域，通过该属性裁剪切角的关键代码：

background: url(./back2.png) no-repeat;
background-size:100% 100%;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);

效果如下：

4.PNG

这种方案应该算最优的方案，无论是怎么样的切角都可以实现，并且宽高的改变也不会影响切角的效果

clip-path除了能实现各种各样的剪切，还能配合transition实现图片渐变