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