CSS clip-path polygon 宣告是一個單一的 polygon() 值，內含 3 到 20 組以百分比表示的 x y 座標對，依繪製順序讀取，例如 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)。本速查表濃縮了語法規則、驗證器限制、預設起點，以及四步驟的建立流程，適用於 CSS Clip Path Generator，讓您不必從頭手寫數值就能產生可運作的 clip-path 宣告。此工具從八種預設輪廓開始(三角形、菱形、五邊形、六邊形、星形、箭頭形、對話氣泡和平行四邊形)，允許您編輯最多 20 組以逗號分隔的座標對，將產生的 polygon() 值套用至真實區塊以即時預覽，並序列化出可直接貼到樣式表或內嵌樣式的完整宣告。由於座標是相對於元素的參考框而非絕對像素，同一組百分比 polygon 可隨不同寬高縮放，這也表示一旦元素被放入寬高比例不同的容器中，正方形預覽就會產生誤導。在本頁中，每一條規則、限制與步驟，皆奠基於該產生器的文件化行為，以及 W3C 所制定的底層 CSS Shapes 規範。
快速參考:Polygon Clip-Path 語法一覽
速查表的格式，在限制與語法規則能容納於單一畫面時最為實用。下表涵蓋了產生器接受與拒絕的值、其所預期的座標格式，以及每條規則在最終宣告中實際改變的內容。
| 規則 | 值或限制 | 為何重要 |
|---|---|---|
| 最少頂點數 | 3 | 少於 3 個點無法定義封閉區域 |
| 最多頂點數 | 20 | 讓編輯器互動與輸出保持可控 |
| 座標格式 | x% y% | 每個點由兩個百分比以空白分隔 |
| 頂點分隔符 | 逗號 | polygon() 內的頂點以逗號分隔 |
| 數值範圍 | 0% 到 100% | 產生器會拒絕超出參考框的值 |
| 小數支援 | 支援，會正規化 | 諸如 33.33% 等數值會被接受並正規化 |
| 頂點順序 | 繪製順序 | 改變順序可能會重新描繪外框 |
| 封閉 | 自動 | 瀏覽器會將最後一點接回第一點 |
| 預設參考框 | border box | 百分比會隨元素寬高縮放 |
編輯時請在另一個分頁保持此表開啟。若預覽看起來不對，最快的診斷方式，是找到對應您剛剛輸入內容的那一列，並確認該值符合文件化的限制。
如何以四個步驟建立 Polygon Clip
產生器刻意將文件化的作業流程設計得很短:選擇起始形狀、依序編輯頂點、以實際長寬比預覽，然後才複製宣告。每個步驟皆對應編輯器中的一項具體變更。
- 從 CSS Clip Path Generator 內可用的八種輪廓中，挑選最接近您所需形狀的預設。
- 依繪製順序編輯以逗號分隔的 x% y% 座標對。請一次移動一個點，觀察預覽在每次變更後的更新，如此即可將任何視覺跳動歸因於特定編輯。
- 將預覽調整為元素預期的長寬比。正方形預覽會讓星形看起來平衡，但同一組百分比頂點在寬矩形上可能會顯得被拉伸。
- 複製產生的 clip-path 宣告並貼到您的樣式表或內嵌樣式，接著在實際頁面上測試版面、鍵盤焦點指示，以及響應式行為。
這套四步驟流程對應於產生器經驗證的操作步驟，刻意讓您在形狀值得出貨前停留在編輯器中。略過第三步，是裁切元素在工具中看起來正確、到了生產環境卻出錯的最常見原因，因為您預覽的長寬比從未符合實際出貨的長寬比。
驗證器強制執行的 Polygon 座標規則
產生器會在序列化宣告之前驗證座標清單，這代表您會看到一則聚焦的錯誤訊息，而非損壞的 polygon() 值。理解這些規則，有助於您撰寫一次就能通過的座標。
- 每個座標必須使用兩個百分比值，例如 50% 0%。缺少百分號、無單位的數字，或每對只有一個值，都會產生錯誤。
- 頂點之間以逗號分隔，而相同的百分比範圍適用於清單中每個 x 與 y 值。
- 百分比在產生器中限制於 0 到 100，讓頂點保持在參考框內，即使 CSS 規範本身可表示超出範圍的位置。
- 至少需要 3 個點才能定義區域，且編輯器最多允許 20 個點。
- 小數百分比會被接受並正規化，因此 33.33% 與 33.3% 會產生等價的輸出。
- 缺少百分號、負值、超過 100 的值、空清單項目，以及格式錯誤的配對，皆會產生聚焦的錯誤，而不是產生不完整的 CSS。
自相交的 polygon 在語法上有效，但填色結果可能出人意料，因為瀏覽器會依照您給定的路徑繪製。此工具會驗證語法與邊界，但並未聲稱每一種頂點順序都能產生視覺上有用的輪廓。若形狀看起來不對，頂點順序與座標本身同樣值得檢查，因為同一組點以不同順序排列，可能會重新描繪出不同的外框。
八種預設形狀及其適用時機
從空白清單開始，通常不是最快的路徑。這八種預設提供了穩定的起始配置，您可以加以微調，而不必從頭重建。下表將每種預設與典型用途配對，讓您一眼就能挑出最接近的選項;確切的起始座標會在您選取預設時由產生器產生。
| 預設 | 典型用途 | 起始形狀 |
|---|---|---|
| 三角形 | 播放按鈕、警示徽章、指向箭頭 | 向上的三點外框 |
| 菱形 | 標籤、裝飾分隔線、鍵值晶片 | 以元素為中心的四點菱形 |
| 五邊形 | 評分圖示、橫幅旗幟 | 以垂直軸對稱的五點外框 |
| 六邊形 | 大頭貼、特色磁磚、重複網格 | 水平與垂直皆對稱的六點外框 |
| 星形 | 收藏、重點標示、裝飾性爆裂 | 向內凹折的內凹外框 |
| 箭頭形 | 步驟指示、麵包屑導覽、下一頁按鈕 | 向內凹折的內凹缺口 |
| 對話氣泡 | 工具提示、標註框、留言 UI | Polygon 對話氣泡輪廓 |
| 平行四邊形 | 傾斜卡片、強調色條 | 四點傾斜矩形 |
預設載入後，最快速的微調模式是一次修改一個座標、觀察預覽，並在移到下一個點之前先鎖定該變更。星形與箭頭形等內凹預設刻意向內凹折，因此若只調整外側頂點、保持內側頂點於相同的百分比深度，便能維持輪廓辨識度，而不致變成另一種形狀。
出貨前的響應式與無障礙檢查
百分比座標參照的是所選的幾何參考框，在沒有明確幾何框的基本 clip-path 值中，通常會使用 border box。這項事實，正是形狀進入生產環境後，多數響應式與無障礙決策的主要依據。
- clip-path 屬性控制的是元素的哪個部分會被繪製，而不是版面工具:周圍元素仍會使用原始的矩形框。裁切掉的角落，可讓可見或可互動的區域縮小，卻不會改變版面的佔用範圍。
- 請勿裁切掉必要的文字、鍵盤焦點指示或觸控目標。被裁切的按鈕仍會在其完整邊界框上接收點擊，但訪客無法看見或聚焦於裁切區域外的像素。
- 對於圖片，請保留具意義的替代文字。裝飾性輪廓可以取代可見的形狀，但無法取代螢幕閱讀器與搜尋引擎所依賴的描述。
- 對於控制項，請仔細測試指標與鍵盤行為，並避免僅以裝飾性輪廓作為用途的唯一線索。
- 視覺上被裁切的圖片仍會以其原始尺寸下載，因此裁切並非媒體的效能最佳化方式。若需要更小的傳輸量，請另外調整或壓縮來源檔案。
- 請檢查目標受眾所需的瀏覽器支援，並在輪廓對內容意義非必要時，提供合理的矩形後備方案。
底層行為記載於 MDN clip-path 參考資料 與 W3C CSS Shapes 規範，而產生器實作了其中定義的百分比 polygon() 形式。
在兩個 Polygon 狀態間進行動畫
兩個 polygon 之間的動畫，通常在兩個形狀擁有相同數量且相容順序的頂點時效果最佳。瀏覽器會沿著直線段，將每個頂點從起始位置內插至結束位置，因此拓撲不一致時，會產生可見的跳動，而不是平滑的過渡。
- 讓起始與結束 polygon 的頂點數一致，使兩個形狀擁有相同數量且相容順序的頂點。
- 保持頂點順序一致:若第三個頂點在第一個 polygon 中是右下角，在第二個 polygon 中也應是右下角，如此內插路徑才會保持意義。
- 兩個 polygon 都維持在 0% 到 100% 範圍內，以免動畫期間的內插超出參考框。
- 此產生器聚焦於數值 polygon 形式。它不會產生 SVG path、曲線指令、圓形、橢圓、inset 形狀或廠商專屬的後備方案，因此轉場至非 polygon 形狀需要採取其他方式。
產生過程完全在瀏覽器端於用戶端執行，這代表頂點不會被上傳或保留，也不會為您的頁面新增任何外部依賴。此工具有助於序列化出有效的 polygon;設計品質、無障礙、效能與內容安全，仍需在被裁切元素出貨前，於最終頁面中進行測試。
延伸閱讀:如何從貼上的路徑產生目錄樹。
延伸閱讀:Cron Parser 速查表:範圍、步階與範例。