《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會方便不少。