css写的一些切角效果
<a href='https://codepen.io/lip90/pen/bRdOwJ/'>查看图片代码</a>
这4个效果都是利用渐变属性实现的，渐变可以接受一个角度作为方向，且色标的位置信息也可以是绝对的长度值，不受容器尺寸的影响。
它们的HTML只需要一个<div>容器：
<div class="cut>
</div>
效果1
只需要一个从右下角往左上角的线性渐变，并且前15px的长度值设置为透明，就可以完成一个切角。
background:#ace;
background:linear-gradient(-45deg, transparent 15px, #ace 0);
实际上，background:#ace;不是必须的，加上它是作为回退机制：如果某些浏览器不支持css渐变，那第二行声明会被丢弃，而此时，至少能得到一个简单的实色背景。
效果2
要切掉两个角，明显一个渐变是不能实现的。因此要加一层。
background:#ace;
background:linear-gradient(-45deg, transparent 15px, #ace 0) right,
linear-gradient(45deg, transparent 15px, #F8E2EB 0) left;
background-size: 50% 100%;
而如果直接把两层都写在css里，只能切掉一个角，因为这两层渐变都是填满整个元素。因此它们会相互覆盖，因此要让它们都缩小一点，每个渐变在水平方向上都各自占据元素的50%。
但是到目前为止它们的显示效果却是这样的：
为了能够更好的观察切角效果，我把其中一个颜色改成了粉色
原因是：忘记把
background-repeat关掉了，因此每层渐变图案各自平铺了两次。代码仍需要改进：
background:linear-gradient(-45deg, transparent 15px, #ace 0) right,
linear-gradient(45deg, transparent 15px, #F8E2EB 0) left;
background-size: 50% 100%;
background-repeat:no-repeat;
最终效果
效果3
只要按照上面介绍的方法，可以很方便的做出切掉四个角的效果，只要四层渐变就可以了：
background:#ace;
background:linear-gradient(135deg, transparent 15px, #F8E2EB 0) top left,
linear-gradient(-135deg, transparent 15px, #ace 0) top right,
linear-gradient(-45deg, transparent 15px, #F8E2EB 0) bottom right,
linear-gradient(45deg, transparent 15px, #ace 0) bottom left;
background-size:50% 50%; /*每个块在水平和垂直方向上都占元素尺寸的50%*/
background-repeat:no-repeat;
效果4
当我们用径向渐变代替线性渐变，就可以做出“内凹圆角”的效果。
background:#ace;
background:radial-gradient(circle at top left, transparent 15px, #F8E2EB 0) top left,
radial-gradient(circle at top right, transparent 15px, #ace 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #F8E2EB 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #ace 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
渐变的方案是行之有效的，但是也存在一些问题：
- 代码繁琐冗长，修改切角尺寸或者改变颜色的时候，需要修改4处。
- 它太繁琐以致与我们不能让各个切角的尺寸以动画的方式发生变化。
我们还可以采用其他的方法来写，比如：border-image，并通过一个内联的SVG图像来产生切角效果。
参考书籍：Lea Verou《CSS揭秘》
网友评论