裁切路徑產生器範例是一個現成的 polygon() 宣告，例如 polygon(50% 0%, 0% 100%, 100% 100%)，它使用依繪製順序讀取的百分比座標，將 HTML 元素裁切成三角形。專屬的產生器提供視覺化預設、可編輯的座標清單，以及即時預覽，讓你在複製 CSS 之前就能看到結果形狀。由於 polygon() 使用百分比，同一個範例會隨元素的寬度和高度縮放，而不是鎖定在固定像素，這使其適用於響應式版面和可重複使用的元件。產生器會驗證每一組座標對，拒絕格式錯誤的輸入，並序列化為乾淨的宣告，讓你貼到樣式表或內聯 style 屬性中。每個 clip-path 範例都共享幾個特性:每個點都是 x 百分比後接 y 百分比，頂點以逗號分隔，瀏覽器會自動從最後一個點畫一條直線回到第一個點來閉合多邊形。這種編輯、預覽與驗證的結合，正是讓單一 clip-path 範例成為可用片段而非憑空猜測的關鍵。
CSS 裁切路徑產生器的功能
CSS 裁切路徑產生器是一個基於瀏覽器的編輯器，用於編輯 CSS clip-path 的百分比 polygon 形式。它從八個實用的預設開始——三角形、菱形、五邊形、六邊形、星形、雪佛龍、訊息氣泡和平行四邊形——因此你不必從空白清單自行發明每個頂點。預設載入後，工具會將其座標清單以繪製順序的逗號分隔 x% y% 配對形式呈現。你可以替換任何值、新增頂點或刪除頂點，最多可達二十個點的上限。每次編輯都會依據瀏覽器套用的相同規則進行驗證:百分比必須介於 0 到 100 之間，每對必須同時包含 x 和 y，而且必須有百分號。小數值可接受並會被正規化，因此 33.33% 0% 在輸出中會被視為等同於 33.3% 0%。即時預覽區塊會接收目前的 polygon() 值，讓你在將 CSS 套用到專案之前，就能以元素的預期長寬比判斷形狀。生成過程完全在瀏覽器中執行，不會上傳或儲存任何座標。
常用形狀的裁切路徑產生器範例
八個內建預設同時也是可複製並調整的具體裁切路徑產生器範例。每個都純粹以百分比座標定義，這也是為什麼同一個宣告在不同元素尺寸下表現一致且可預測。下表列出每個預設的代表性 polygon() 宣告、使用的點數，以及所產生的視覺輪廓。
| 形狀 | 範例 polygon() 宣告 | 點數 | 輪廓 |
|---|---|---|---|
| 三角形(向上) | polygon(50% 0%, 0% 100%, 100% 100%) | 3 | 向上的等邊三角形 |
| 菱形 | polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | 4 | 內接於參考框的菱形 |
| 五邊形 | polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) | 5 | 正五邊形 |
| 六邊形 | polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) | 6 | 平頂正六邊形 |
| 星形(五角) | polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) | 10 | 外內頂點交錯的五角星 |
| 雪佛龍(向右) | polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%) | 6 | 左邊內凹的向右箭頭 |
| 訊息氣泡 | polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%) | 7 | 帶向下尾端的圓角矩形 |
| 平行四邊形 | polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%) | 4 | 傾斜的四邊形 |
閱讀這些範例時有兩個細節很重要。第一，點的順序就是繪製順序，重新排列同一組座標會產生不同的輪廓。第二，星形和雪佛龍等凹形刻意向內折疊;瀏覽器仍將每個線段視為直線，因此內凹的角度正是賦予這些預設可辨識輪廓的原因。自相交的多邊形可能以出人意料的方式呈現，因為 CSS Shapes 規範將填充規則留給使用者代理決定，這就是為什麼產生器會驗證語法，但不保證每種點的順序在視覺上都好看。上述裁切路徑產生器範例皆使用 0 到 100 範圍內的值，即使 CSS 本身允許參考框外的點，這能確保每個頂點都在參考框內或其邊界上。如需更深入的合法座標對參考，請參閱polygon 座標的裁切路徑產生器速查表。
逐步產生裁切路徑
從空白頁面到可運作的宣告，最短的路徑是從預設開始、一次一個頂點地編輯座標，並在實際的長寬比下確認結果。CSS 裁切路徑產生器遵循四個具體步驟。
- 選擇最接近所需形狀的預設——三角形、菱形、五邊形、六邊形、星形、雪佛龍、訊息氣泡或平行四邊形。
- 依繪製順序編輯逗號分隔的 x% y% 座標對;小數值會被正規化，且驗證會拒絕缺少百分號、負值或超過 100 的值。
- 請以目標元素的長寬比而非僅預設的正方形來檢查預覽，因為百分比座標會隨參考框縮放。
- 複製宣告並在目標頁面上測試版面、焦點與響應式行為，包括任何需要矩形後備方案的瀏覽器。
為何百分比座標能在不同框中延展
CSS 中的 polygon 座標是元素參考框的百分比，未明確指定幾何屬性時，通常為邊框盒。這就是為什麼同一個裁切路徑產生器範例在正方形元素上看起來平衡，在寬矩形上卻會被拉伸。座標本身從不改變，但可見的比例會改變，因為 x 軸和 y 軸會依元素的實際寬度和高度獨立縮放。由 polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) 建構的菱形會落在任何矩形參考框的角落，但可見菱形的對角線長寬比會對應框的長寬比:較寬的框產生較寬的菱形，較高的框產生較高的菱形。請務必在版面實際使用的寬度和高度下預覽同一宣告，以及在元素調整大小的每個斷點處預覽。W3C CSS Shapes Module Level 1 描述了這種幾何行為，而 MDN clip-path 參考資料 則列出該屬性支援的值和瀏覽器。
無障礙性、版面與效能注意事項
Clip-path 隱藏像素，但不會改變版面。元素仍佔據其原始的矩形框，因此周圍內容不會重新流動以適應被裁切的輪廓。這項區別對焦點環、觸控目標，以及任何可點擊區域被裁切掉一部分的互動元素都很重要。請勿裁切掉必要的文字、鍵盤焦點指示器或點擊區域，也避免僅以裝飾性輪廓作為控制項用途的唯一訊號。對於圖片，即使僅顯示片段，仍應保留有意義的替代文字;對於動畫過渡，請保持起點和終點多邊形之間的頂點數相同且順序相容，讓瀏覽器能乾淨地進行插值。在效能方面，被視覺裁切的圖片仍會以其原始尺寸下載，因此請將 clip-path 與適當大小的來源檔案結合使用。請根據目標受眾檢查百分比 polygon 形式的瀏覽器支援，並在輪廓屬於裝飾性而非必要時提供合理的矩形後備方案。W3C CSS Shapes Module Level 1 和 MDN clip-path 參考資料都會在其各自規範中描述這些限制。
延伸閱讀:大量玻璃擬態產生器:建立一致的玻璃 CSS。