《CSS揭秘》：切角效果

切角效果

切角效果是一种常见的视觉风格设计。但是现在在CSS里，依然无法简单的生成切角效果。

css渐变

使用CSS渐变[linear-parent][1]可以形成切角风格

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

如果想要四个角都切，则可以

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) bottomright,
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

内联SVG与border-image方案

SVG方案不熟悉，暂时不讨论。原文位于《CSS》揭秘12:切角效果。

裁切路径方案

使用裁切路径可以在裁切任意多边形，下面的代码可以切除和上文一样的效果。其实就是指定了八个顶点。

clip-path:
    polygon(
        15px 0, calc(100% - 15px) 0, 100% 15px, 
        100% calc(100% -  15px), calc(100% - 15px) 100%,
        15px 100%, 0 calc(100% - 15px), 0 15px
    );

使用本方案虽然简短，但是维护缺并不方便。改变切角深度时需要同时改变8个地方。使用css与处理器的mixin会方便很多。