使用 shape() 進行回應式裁剪

Noam Rosenthal

發布日期：2025 年 4 月 8 日

您可以使用 clip-path 屬性，將元素裁剪為圓形、多邊形，甚至是 SVG 路徑，藉此變更元素的形狀。不過，在 Chrome 135 和 Safari 18.4 之前，您必須在回應式多邊形和使用 SVG 路徑的更複雜形狀之間做出選擇。有了新的 shape() 函式，clip-path 就能將元素剪輯為非多邊形形狀，且仍能回應。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox Technology Preview: supported.
  • Safari: 18.4.

Source

建立旗幟形狀

舉例來說，請比較使用 clip-path: path() 和 clip-path: shape() 建立旗幟形狀的效果。

綠色旗幟形狀，頂部和底部有弧形線條。

旗幟形狀並非完全的多邊形，因為其頂部和底部邊框是立方貝茲曲線，而非直線或圓角。

使用 clip-path: path() 建立標記

您可以使用 SVG 路徑呈現這類旗幟形狀：

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

進一步來說，SVG 路徑是一連串路徑指令：

  1. 移動到 0, 20。
  2. 使用控制點 (25,0 和 75, 40) 將曲線拉到 100, 20。
  3. 垂直線為 80。
  4. 使用控制點 (75,100 和 25,50) 將曲線調整至 0, 80。
  5. 關閉路徑 (線條到 0,20)。

這會繪製旗幟形狀，但所有單位皆為像素。SVG 可以將這些像素縮放至檢視區塊，但以一貫的方式顯示整個形狀的幾何縮放比例。

舉例來說，如果您想讓整個矩形縮放，但維持曲線的高度和寬度為 20 像素，SVG 就無法勝任此任務。

使用 shape() 建立標記

請使用 shape() 比較相同的結果。形狀函式接受一系列指令，類似於 SVG 路徑指令。不過，這些指令可接受任何 CSS 單位的 CSS 長度和百分比。

以下 CSS 會將標記轉換為使用百分比單位的 shape()：

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

讓網頁能隨螢幕大小調整

您可以使用 CSS 的所有長度，並為每個座標選擇要使用的長度。

舉例來說，如要讓旗幟的整體大小依元素大小縮放，但保持曲線高度不變，您可以執行下列操作：

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

新增自訂屬性和動畫

您現在可以在 CSS 中定義形狀，也可以使用自訂屬性，輕鬆操控高度：

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

您甚至可以使用 @property 描述元，為 CSS 屬性製作動畫，並將其夾持，以免超出範圍：

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

立即試用

在 Chrome 135 或 Safari 18.4 中，您可以查看在這個 CodePen 示範中使用 clip-path: shape() 建立的旗幟動畫形狀。

摘要

clip-path: shape() 可讓您使用任意且回應式形狀裁剪元素，這項功能先前只能透過圓錐漸層或 JavaScript 建構的 SVG 等技術才能實現。

如需完整語法，請參閱規格說明。

目前僅支援 clip-path。我們預計在未來使用這類形狀來設定元素邊框的形狀，這樣就能解鎖更多非矩形的呈現方式。