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

Noam Rosenthal

發布日期：2025 年 4 月 8 日

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

Browser Support

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 路徑是一連串的路徑指令：

移至 0, 20。
使用控制點 (25,0 和 75, 40)，將曲線設為 100, 20。
垂直線至 80。
使用控制點 (75,100 和 25,50)，將曲線調整為 0、80。
關閉路徑 (線條至 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。我們預計在日後使用這類形狀設定元素邊框的形狀，進一步以非矩形的方式呈現。