将角切掉也是一种流行的设计风格
传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果
有了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, transpar