[CSS揭秘]切角效果

将角切掉也是一种流行的设计风格

传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果

有了CSS3,我们完全可以使用新技术来实现

第一种方案: CSS渐变

需求一: 一个矩形需要切掉一个45°角

使用线性渐变来实现

background: #58a linear-gradient(-45deg, transparent 15px, #58a 0);

在渐变中，如果指定stop距离为0则表示与前一个stop的距离一样，所以从15px开始往后都是#58a

效果如下

 

需求二: 一个矩形需要切掉两个45°角

如果依然使用前面的线性渐变方案就会发现第二层渐变会覆盖第一层渐变。所以需要调整这些渐变的覆盖区域，即调整背景图片的大小。同时不要将背景图片重复。

效果如下

background-image: linear-gradient(-45deg, transparent 15px, #58a 0, linear-gradient(45deg, transparent 15px, #58a 0);

background-size: 50% 100%;

background-repeat: no-repeat;

background-position: right center,left center;

效果如下

 

需求三: 一个矩形四个角都需要切掉45°

使用4层渐变来实现该需求

background-image: linear-gradient(135deg, transparent 15px, #58a 0),

                             linear-gradient(-135deg, transparent 15px, #58a 0),

                             linear-gradient(-45deg, transparent 15px, #58a 0),

                             linear-gradient(45deg, transparent 15px, #58a 0);

background-repeat: no-repeat;

background-size: 50% 50%;

background-position: left top, right top, right bottom, left bottom;

效果如下

 

需求四: 一个矩形四个角都需要切成圆弧型

弧形切角(内凸圆角)实现方式就是讲线性渐变改成径向渐变

background-image: radial-gradient(circle at top left, transparent 15px, #58a 0),

                             radial-gradient(circle at top right, transparent 15px, #58a 0),

                             radial-gradient(circle at bottom right, transparent 15px, #58a 0),

                             radial-gradient(circle at bottom left, transparent 15px, #58a 0);

background-repeat: no-repeat;

background-size: 50% 50%;

background-position: left top, right top, right bottom, left bottom;

 

第二种方案: clip-path 剪裁路径

可以使用任意类型的背景裁剪出任意形状的图案

总结: 优先使用渐变来实现切角效果，等到主流浏览器都开始支持clip-path属性之后或者是满足高端浏览器时可以通过剪裁实现各种各样的切角效果。