使用 CSS's clip-path 屬性建立有趣的圖片形狀

在 CSS 中使用剪輯功能，有助於我們捨棄設計中任何外觀的方塊。您可以使用各種基本形狀或 SVG 建立剪輯路徑。然後去除不想顯示的元素部分。

Rachel Andrew

網頁上的元素全都是在矩形方塊中定義。 但這並不代表我們一定要讓所有內容看起來都像個盒子。 你可以使用 CSS clip-path 屬性，裁剪圖片或其他元素的特定部分。 即可產生有趣的效果

在上述範例中，氣球圖片為正方形 (來源)。使用 clip-path 和 circle() 的基本形狀值，系統會裁剪氣球周圍多餘的天空，在頁面上留下圓形圖片。

由於圖片是連結，您可以查看 clip-path 資源的其他資訊。只有圖片的顯示區域可供點選，因為事件不會在圖片的隱藏部分觸發。

裁剪功能可套用至任何 HTML 元素，不侷限於圖片。 你可以透過幾種不同方式建立 clip-path，這篇文章將介紹這些方法。

瀏覽器相容性

如果是舊版瀏覽器，系統可能會允許瀏覽器忽略 clip-path 屬性，並顯示未裁剪的圖片。 如果此為問題，您可以在功能查詢中測試 clip-path，並提供不支援瀏覽器的其他版面配置。

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

基本形狀

clip-path 屬性可接受多個值。初始範例使用的值為 circle()。 這是其中一個基本形狀值，定義於 CSS 形狀規格。 也就是說，你可以裁剪某個區域 而且 shape-outside 也使用相同的值，讓文字環繞形狀。

基本形狀的完整清單如下：

• inset()
• circle()
• ellipse()
• polygon()

inset()

inset() 值會從元素邊緣插入裁剪區域。 並且可以傳遞頂端、右側、底部和左側邊緣的值。 也可以新增 border-radius 至裁剪區域的角落、 與回應相關。round

在我的範例中，我有兩個方塊，兩者都含有 .box 類別。第一個方塊沒有裁剪，第二個方塊則使用 inset() 值進行裁剪。

circle()

如您所見，circle() 值會建立圓形裁剪區域。 第一個值是長度或百分比，也是圓的半徑。第二個選用值可讓您設定圓形的中心。 在以下範例中，我使用關鍵字值來設定裁剪的圓形右上方。你也可以使用長度或百分比。

留意平坦的邊緣！

請注意，這裡的所有這些值都會被元素邊界方塊裁切。 如果你在圖片上建立圓形， 這樣形狀會超出圖片自然大小，就會得到扁平的邊線

ellipse()

橢圓形基本上是扁平的圓形，因此與 circle() 的運作方式非常相似，但會接受 x 和 y 的半徑，以及橢圓形中心的值。

polygon()

polygon() 值可協助你建立相當複雜的形狀。 定義數量不限 設定每個點的座標

為了協助你建立多邊形，請參閱 Clippy 範例， clip-path 產生器 然後複製程式碼並貼到自己的專案中

方塊值的形狀

在 CSS 形狀中定義同樣是方塊值中的形狀。 包括內容方塊、邊框間距方塊、邊框方塊 和邊界方塊，關鍵字值為 content-box、border-box、padding-box 和 margin-box。

您可以單獨使用這些值，也可以與基本形狀搭配使用來定義形狀使用的參考方塊。 例如，下列程式碼會將形狀裁剪到內容邊緣。

.box {
  clip-path: content-box;
}

在這個範例中，圓形會使用 content-box 做為參考方塊，而不是 margin-box (預設值)。

.box {
  clip-path: circle(45%) content-box;
}

目前瀏覽器不支援使用 clip-path 屬性的方塊值。 不過，這些函式支援 shape-outside。

使用 SVG 元素

如果想進一步控制裁剪區域，可以使用基本形狀 請使用 SVG clipPath 元素。 然後使用 url() 做為 clip-path 的值來參照該 ID。

為裁剪區域製作動畫

可以為 clip-path 套用 CSS 轉場效果和動畫，創造有趣的效果。 在下方範例中，我們要在兩個半徑不同的圓形之間轉換，讓遊標懸停在圓圈上加上動畫效果。

有許多別具創意的方法可將動畫用於剪輯。 在 CSS Tricks 上使用裁剪路徑製作動畫相關構想，

相片來源：Matthew Henry 發表了 Burst。