css3知识汇总：切角

1.使用渐变

因为渐变可以接受一个角度，比如45deg作为方向，而且色标的位置信息也可以是绝对的长度值，不受容器尺寸的影响。把一个透明色标放在切角处，然后在相同位置设置另一个色标，并且颜色设置为想要的背景色。

4个切角，写几个 linear-gradient就是几个切角

div{

    width:300px;

    height: 200px;

    background-color: #58a;/*回退机制*/

    background:

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

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

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

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

    background-size: 50% 50%;

    background-repeat: no-repeat;

}

transparent改为red

background-size:45% 45%

2.使用clip-path

div{

    width:300px;

    height:200px;

    background: #58a;

    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);

}

3.使用corner-shape

div{

    width:300px;

    height:200px;

    background: #58a;

    corner-shape:bevel;

    border-radius:10% / 30px;

    width:400px;

    height: 300px;

}

注：目前此方法还在测试中，还没有浏览器支持

【弧形切角（内凹圆角）】

div{

    width:300px;

    height:200px;

    background-color: #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;

}