在css中實現平角、弧形切角的樣式方法

在web設計中，有時候會碰到一些切角的樣式需求，實作方法有很多種，用圖片也好，結點疊加覆蓋也好，都可以實現切角的樣式，這裡筆者直接用css來實現切角的樣式。
切單一角：

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

採用如上圖css就可以實現樣式，修改角度就可以實現任一角度的切角效果。
切兩個角：

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方案，裁切路徑方案等，有興趣的讀者可以自己探索嘗試。

在web設計中，有時候會碰到一些切角的樣式需求，實作方法有很多種，用圖片也好，結點疊加覆蓋也好，都可以實現切角的樣式，這裡筆者直接用css來實現切角的樣式。
切單一角：

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

採用如上圖css就可以實現樣式，修改角度就可以實現任一角度的切角效果。
切兩個角：

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方案，裁切路徑方案等，有興趣的讀者可以自己探索嘗試。

以上是在css中實現平角、弧形切角的樣式方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！