iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0
Modern Web

CSS Secrets 導讀系列 第 16

Secret 12: 截角效果 (clip-path)

雖然border-image的做法很簡潔也很 DRY,仍然有它的限制,比如說我們還是需要有個純色的背景。

還記得在鑽石形圖片中用過的clip-path嗎?CSS clipping paths 驚人的功能是我們可以混合使用絕對長度和百分比,這給我們很大的彈性。

例如要製作20px邊長大小的截角,它的樣式就像這樣:

.box {
	background: grey;
	clip-path: polygon(
		20px 0, calc(100% - 20px) 0, 100% 20px, 
		100% calc(100% - 20px), calc(100% - 20px) 100%, 
		20px 100%, 0 calc(100% - 20px), 0 20px
	);
}

雖然一行 CSS 就解決,但是要改截角大小的話卻要改動到8個地方,在維護上是挺不方便。

這個方法的好處是可以用任何東西當背景,尤其是圖片,之前示範的方法沒有一個能做到這樣的效果。而且因為 clip-path可以被 CSS Animations 操作,所以不只能對截角大小加上動畫,連形狀也能加上動畫。

除了維護麻煩以及有限的瀏覽器支援外(IE 和 Edge 和 Safari 不支援 clip-path),它的缺點是如果沒有足夠的padding元素,裡面的文字有可能被切掉。前面示範的 gradient 方法文字則會溢出角落,因為它們只是背景無法限制內容區域。border-image的方法如同普通的border一樣會讓文字按照它 text wrap 的設定呈現。

CodePen


想不到看起來簡單的截角實現起來挺複雜的,在 CSS Backgrounds & Borders Level 4 裡有了新的規範讓我們不用再這麼麻煩,corner-shape能指定角落的形狀,配合border-radius指定其大小。

.box {
	border-radius: 15px;
	corner-shape: bevel;
}

上一篇
Secret 12: 截角效果 (inline SVG)
下一篇
Secret 13: 梯形標籤
系列文
CSS Secrets 導讀30

尚未有邦友留言

立即登入留言