12、切角效果

使用渐变背景可以实现元素的切角效果。

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

实现底部两个切角时，需要使用两层渐变，再把两层渐变的大小分别设置为整个元素的一半，这样让两层渐变不会相互覆盖，并且关闭掉背景平铺。

background: linear-gradient(45deg,transparent 15px,#58a 0) left,
            linear-gradient(-45deg,transparent 15px,#58a 0) right;
background-size: 50% 100%;
background-repeat: no-repeat;

同样，需要4个角全部为切角的话就需要用到4层渐变，并将4层渐变的起始位置分别置于4个角上。这时候每层渐变的大小就变成了元素的四分之一。

background: linear-gradient(45deg,transparent 15px,#58a 0) left bottom,
            linear-gradient(-45deg,transparent 15px,#58a 0) right bottom,
            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;

将线性渐变换成径向渐变，切角就会变成弧形。就可以实现“内凹的圆角”效果。同样将4层渐变的圆心位置分别置于元素的4个角上。

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 left,transparent 15px,#58a 0) bottom left,
            radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;