[譯] 學習 CSS clip-path 屬性

整體來說網頁主要是由矩形所構成的,另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多,不過其中一個即是缺少合適的工具。
這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部,就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區,類似於遮色片的概念。我們將從基礎開始然後涵蓋語法,進一步理解進階的概念。

基礎

clip 意思是剪裁,意味著修剪某物的外型。在網頁設計的情況下,是讓我們可以去決定某個元素完全隱藏或局部隱藏。而在這篇文章中另外兩個相關的概念是 clipping pathclipping region

clipping path 剪裁路徑意思就是我們使用它去修剪一個元素,透過路徑組成 clipping region 剪裁範圍。這個範圍或稱區域可以是簡單的形狀或複雜的多邊形。剪裁範圍就是透過一個封閉的剪裁路徑所組成的,這與您使用 Illustrator 的鋼筆工具繪製形狀的概念是一樣的。

任何在形狀範圍外的東西都會被瀏覽器裁掉。不只包含背景其他像是內容,borders,text-shadow 效果都會被裁掉。此外瀏覽器甚至不會處理範圍外的事件像是 hover, click 等。

即便我們設定的元素不再是矩形,但周圍的元素排列方式仍然維持原本矩形的佈局。為了達成周圍的元素跟著裁切的形狀,我們可以使用 shape-outside 屬性。

同時記住不要把舊的樣式 clipclip-path 等搞混了。舊有的屬性只支援矩形的裁切。

使用

目前這個樣式規則的語法如下:

1
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

上面語法表示的是:

  • clip-source 會是一個 URL 參考到一個 SVG <clipPath> 元素,這個元素可以是在檔案內部的或外連的。
  • basic-shape 基本形狀的 function ,您可以在 CSS Shapes 規範 中找到並使用。
  • geometry-box 可選的參數。搭配 basic-shape 函數,它的用途是設定整張畫布的基準點,定義裁切從哪範圍開始。如果我們自訂 geometry-box 那裁切路徑便會照著我們定義的形狀,包含任何圓角設定 border-radius 。這樣說有點模糊,稍後我們會詳細介紹。

現在,讓我們來思考下面這段 css 程式

1
2
3
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

這段設定將會裁切所有圖片為一個菱形。不過為什麼圖片會變成菱形呢?為什麼不是梯形或平行四邊形?您應該猜到了,這是因為形狀取決為我們定義的頂點。下面圖片說明了建立裁切形狀時使用的慣例

每個座標的第一個參數指定了該座標的 x 軸,第二個參數則是 y 軸。所有的點依照順時鐘的方向繪製。依照這個規則與上圖我想您應該理解了。

如果您正在使用 CodePen 測試這些語法,請注意上面的程式範例僅在 Chrome 並且需要使用 prefix 才能正常運行,您可以打開 Auto Prefix 功能。

CodePen

使用 geometry-box 裁切元素

當我們要裁切 HTML 元素時,geometry-box 可以是下列值 margin-box, border-box, padding-box, content-box

1
2
3
4
.el {
clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
margin: 15px;
}

上面的範例,margin-box 會決定我們得座標點從 margin 的範圍開始,而 (10%, 10%) 就是我們實際內容的左上角,因此 clip-path 也必須對應計算。

SVG 元素的狀況下,參數可能是 fill-box, stroke-box, view-box 。其中 view-box 會最接近整個 svg 的可視範圍。

clip-path 的使用方式

關於這個屬性有很多有趣的使用方式。第一個就是它可以美化文字內容。您可以觀察一下下圖,我們透過背景色與裁切所營造出的感覺不再受限與單純的方形。

簡單說您可以簡單的使用背景色,漸層等等您已經熟悉的屬性然後搭配 clip-path ,例如上面粉紅色背景類似泡泡對話框的效果,從前我們可以要透過 border 組成三角形在透過 transform 和調整位置等屬性去完成,現在換成 clip-path 只需要一行,我們可以輕鬆完成任何不規則的形狀。

1
2
3
.msg {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}

當然您可以用來裁切圖片使其變成各種不同的形狀,您的相片圖庫的頁面不再只能用矩形呈現。下面是一個範例建議您使用 Chrome 玩玩

CodePen

動畫

這個屬性也能夠被用在動畫上。唯一要注意的是初始時和最後結果的座標數量要一致。

1
2
3
4
5
6
7
8
9
10
11
@keyframes polygons {
25% {
clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
}
50% {
clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
}
70% {
clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
}
}

為了維持動畫的順暢,基本上座標數量最好保持一致,至於形狀的變化您可以透過重疊座標來實現。

奇技淫巧

另外我們還可以透過 clip-path 來隱藏元素,不過這個效果類似於 visibilityopacity 該位置空間仍會被佔據。

1
2
3
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

關於瀏覽器支援度

這個屬性暫時在 IE, Edge 是不能使用的,Firefox 也還沒完全支援只支援部份語法,在 v47 還得要套過 layout.css.clip-path-shapes.enabled 來開啟。Chrome 的話要加上 -webkit- prefix。

總結

總結來說關於 clip-path 的重點大略為

  • 設定的座標點(clip-path)需要能夠封閉,圍成一個形狀(clip-range),這個形狀就是顯示的區域。
  • 周圍的元素仍需要靠 shape-outside 來修正。
  • geometry-box 用來設定座標軸範圍,用在 HTML 和 SVG 參數是不同的。
  • 動畫的部分座標點數量需維持一致。
  • 目前大多數的瀏覽器支援度還不夠。
  • clippy座標產生器可以協助我們取得座標。

原文參考

作者

andyyou(YOU,ZONGYAN)

發表於

2016-06-28

更新於

2021-12-12

許可協議