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