切角效果

现在流行把元素的一个或多个角切成45°的缺口（也称作斜面切角）。
CSS渐变方案
利用渐变可以接受一个角度（比如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。
一个切角：

.box{
            margin: 20% auto;
            padding: 1em;
            text-align: center;
            width: 30%;
            height: 20%;
            background: #58a;
            background: linear-gradient(-45deg,transparent 10px,#58a 0) right;
        }

一个切角效果

现在假设要做两个切角，以底部为例，最初的想法可能是：

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

第一次尝试失败

失败的原因是默认情况下，两层渐变都会填满整个元素，因此他们会相互覆盖，这就需要让他们都缩小一些，于是我们使用background-size让每层渐变分别只占据整个元素一半的面积：

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

还是没有达到理想效果

原因在于我们忘记关掉background-repeat因而每层渐变各自平铺了两次，再次改进代码：

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

最终效果

显然，做四个切角就需要四层渐变：

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

中间两条缝我也不知道什么鬼
使用SASS预处理器的mixin可以减少代码重复
弧形切角
也称作“内凹圆角”，即使用径向渐变来实现以上效果：

background: #58a;
background: radial-gradient(circle at top left,transparent 10px,#58a 0) top left,
            radial-gradient(circle at top right,transparent 10px,#58a 0) top right,
            radial-gradient(circle at bottom right,transparent 10px,#58a 0) bottom right,
            radial-gradient(circle at bottom left,transparent 10px,#58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

弧形切角实现效果
裁剪路径方案

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