將角切掉也是一種流行的設計風格

傳統解決方案可能是使用三角形或者其他形狀的圖片來蓋住邊角從而模擬切角效果

有了CSS3,我們完全可以使用新技術來實現

第一種方案: CSS漸變

需求一: 一個矩形需要切掉一個45°角

使用線性漸變來實現

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

在漸變中，如果指定stop距離為0則表示與前一個stop的距離一樣，所以從15px開始往後都是#58a

效果如下

需求二: 一個矩形需要切掉兩個45°角

如果依然使用前面的線性漸變方案就會發現第二層漸變會覆蓋第一層漸變。所以需要調整這些漸變的覆蓋區域，即調整背景圖片的大小。同時不要將背景圖片重復。

效果如下

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

background-size: 50% 100%;

background-repeat: no-repeat;

background-position: right center,left center;

效果如下

需求三: 一個矩形四個角都需要切掉45°

使用4層漸變來實現該需求

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

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

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

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

background-repeat: no-repeat;

background-size: 50% 50%;

background-position: left top, right top, right bottom, left bottom;

效果如下

需求四: 一個矩形四個角都需要切成圓弧型

弧形切角(內凸圓角)實現方式就是講線性漸變改成徑向漸變

background-image: radial-gradient(circle at top left, transparent 15px, #58a 0),

radial-gradient(circle at top right, transparent 15px, #58a 0),

radial-gradient(circle at bottom right, transparent 15px, #58a 0),

radial-gradient(circle at bottom left, transparent 15px, #58a 0);

background-repeat: no-repeat;

background-size: 50% 50%;

background-position: left top, right top, right bottom, left bottom;

第二種方案: clip-path 剪裁路徑

可以使用任意類型的背景裁剪出任意形狀的圖案

總結: 優先使用漸變來實現切角效果，等到主流瀏覽器都開始支持clip-path屬性之後或者是滿足高端瀏覽器時可以通過剪裁實現各種各樣的切角效果。

[CSS揭秘]切角效果