实现一个角被切掉的效果，可以使用渐变，渐变接受一个角度作为方向，并且允许文字溢出并超出切角区域（因为它只是背景图案），具体实现如下：

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

效果如下：

实现两个切角的办法：

div { width: 200px; height: 100px; background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #65a 0) left; background-size: 50% 100%; background-repeat: no-repeat; }

效果如下：

同理的四个切角的实现：

div { width: 200px; height: 100px; background: #58a; background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(-135deg, transparent 15px, #58a 0) top right, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(45deg, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }

效果如下：

上面的代码可维护比较差，在改变切角和颜色时都要修改多处，所以我们可以使用scss的mixin来写：

@mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) { background: $bg; background: linear-gradient(135deg, transparent $tl, $bg 0) top left, linear-gradient(225deg, transparent $tr, $bg 0) top right, linear-gradient(-45deg, transparent $br, $bg 0) bottom right, linear-gradient(45deg, transparent $bl, $bg 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }

调用时：

@include beveled-corners(#58a, 15px, 5px);

最后生成的效果是左上角和右下角是15px的切角，右上角和左下角是5px的切角。上面的minxin设置了初值，当传入的值少于四个值时，就跟border-radius赋值一样。

一样的道理我们也可以创建弧形切角，至少改成径向渐变

div { width: 200px; height: 100px; background: #58a; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }

效果如下：

内联SVG与border-image的方式

SVG 可以实现与尺寸完全无关的完美缩放，当文本溢出的时候，则会起到普通边框的作用，令文字折行。具体的实现如下：

div { width: 200px; height: 100px; border: 15px solid transparent; border-image: 1 url('data:image/svg+xml,\<svg xmlns="" width="3" height="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>'); }

效果如下：

解决中间的背景色的填充可以给div块加一个和border一样的背景色：

div { width: 200px; height: 100px; border: 15px solid transparent; border-image: 1 url(data:image/svg+xml,\<svg xmlns="" width="3" heigh="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>); background: #58a; background-clip: padding-box; }

裁切路径方案CSS 裁切路径最神奇的地方在于我们可以同时使用百分比数值（它会以元素自身的宽高作为基数度进行换算）和绝对长度值，从而提供巨大的灵活性。

(责任编辑：admin)