css實現平角切角和弧形切角效果

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

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




background-repeat: no-repeat;

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

可以看到，圖案類似傳統的剃須刀片，實現這種樣式並不難，我們用徑向漸變來替代線性漸變就可以。

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

想要實現切角的效果，還有不少其他的方案，比如內聯svg和border-image方案，裁切路徑方案等，感興趣的讀者可以自己探索嘗試。