CSS 裁切路徑產生器會產生一段 polygon() 宣告,由以百分比為單位的座標對組成,用來告訴瀏覽器要繪製元素的哪些像素。使用 CSS 裁切路徑產生器 時,你可以從八種預設外形中擇一,依繪製順序編輯每個 x% y% 頂點,在實際區塊上預覽結果,然後把可直接使用的 clip-path 宣告複製到樣式表或行內樣式中。每個座標都是介於 0 到 100 百分比的數字,可接受小數,至少需要三個點才能圍成一個區域,而最多允許二十個點以建立更複雜的形狀。由於座標是參照元素的參考框,因此同一個百分比的多邊形可以在不同寬高下延展,而不必重寫規則。產生器會解析你輸入的清單,驗證每一對座標,並把產生的 polygon() 套用於即時預覽,讓你在送出 CSS 之前能比較形狀、比例與頂點順序。
在幕後,這個工具完全在瀏覽器中運作。不會上傳任何資料、不會保留任何內容,也不會載入任何外部函式庫。你在文字區中輸入百分比座標對,腳本會正規化小數值,檢查每個 x 和 y 是否落在 0 到 100 之間,然後輸出一段 polygon(50% 0%, 0% 100%, 100% 100%) 形式的字串,即時預覽會把它當作真正的 clip-path 宣告來使用。這段字串同樣也是你要貼到專案中的內容。由於預覽使用的是實際的 CSS 屬性,你所看到的就是瀏覽器實際繪製的結果。
產生器的輸出內容
工具的輸出是一段單獨的 clip-path: polygon(...) 值。沒有行內樣式、沒有供應商前綴、沒有 SVG 路徑,也沒有 JavaScript 依賴。八種內建預設涵蓋常見的裝飾形狀,讓你從一個可用的外形開始,而不是從空白清單開始。
| 預設 | 常見用途 |
|---|---|
| 三角形 | 播放按鈕、行動呼籲箭頭、橫幅尖端 |
| 菱形 | 徽章、標籤、旋轉的強調區塊 |
| 五邊形 | 貼紙、評分形狀、裝飾面板 |
| 六邊形 | 鑲嵌格狀佈局、技術示意圖、大頭貼 |
| 星形 | 獎項、評分、節慶橫幅 |
| 箭頭形 | 步驟指示、麵包屑分隔符、橫幅 |
| 對話泡泡 | 工具提示、聊天預覽、註解標註 |
| 平行四邊形 | 傾斜標籤、側邊欄裝飾、斜向強調 |
每個預設都是一組已知的百分比座標對排列,在正方形預覽上會形成一個均衡的外形。載入預設後,你可以一次調整一個頂點,以符合你的元素、品牌標誌或視覺概念。
逐步建立裁切路徑
以下的操作流程對應已驗證的執行步驟,帶你從空白預覽一路走到可直接複製的宣告。
- 選擇最接近你所需形狀的預設。挑選輪廓最像你最終想交付的形狀。預設能提供穩定的起點配置,而不是要你從頭維護一份空白清單。
- 依繪製順序編輯以逗號分隔的 x% y% 座標對。每個頂點都是一個 x 百分比加上一個 y 百分比,中間以空白分隔。各頂點之間則以逗號分隔。請將每個值保持在 0 到 100 百分比之間,讓多邊形維持在參考框之內。
- 以目標元素的長寬比檢查預覽。預設的正方形預覽可能讓星形看起來很均衡,但同一組座標套用在寬長方形上可能會顯得被拉長。在鎖定數值之前,請調整預覽大小以符合實際容器。
- 複製宣告並測試版面、聚焦與響應式行為。把輸出貼到樣式表或行內樣式,確認周圍版面仍保留原本的矩形配置空間、鍵盤聚焦指示仍清楚可見,以及觸控目標在小螢幕上仍可點擊。
一次只修改一個座標,觀察預覽如何更新。即使每個座標值都不變,改變點的順序也可能產生不同的外形,因為瀏覽器會在相鄰頂點之間繪製直線段,並把最後一個頂點接回第一個頂點。
百分比座標如何隨容器縮放
你輸入的每個百分比都是參照所選的幾何參考框。在基本的 clip-path 且沒有明確指定幾何框時,預設會使用邊框 (border box)。位於 25% 50% 的點會落在寬度的四分之一處與高度的一半處,與元素的實際測量尺寸無關。這就是為什麼正方形預覽可能會誤導你:在 400 乘 400 像素上看起來均衡的星形,在 1200 乘 300 的橫幅上即使百分比清單完全相同,也會看起來被拉長。
若想用具體數字來看這個關係,取 25% 50% 這個點套用在 400 乘 300 的元素上。瀏覽器會將它轉換為距左邊 25% 的 400 = 100 像素,以及距頂部 50% 的 300 = 150 像素。同樣的 25% 50% 套用在 800 乘 600 的元素上,則會變成距左邊 200 像素、距頂部 300 像素。百分比會線性縮放,這就是為什麼當長寬比改變時,可見的比例會跟著偏移。
由於座標是相對的,同一段 polygon() 值可以同時驅動行動裝置上的縮圖與桌面上的主視覺區塊,而不必重寫規則。只有在大幅切換長寬比時才需要重新調整頂點,而產生器的預覽就是確認新形狀仍然閱讀正確的最簡便方式。
解讀點的順序與封閉的多邊形
瀏覽器會依清單中頂點的出現順序來繪製多邊形。它會用一條直線段把第一個頂點接到第二個頂點,再把第二個接到第三個,依此類推,並把最後一個頂點接回第一個頂點來封閉路徑。不需要在清單結尾重複起點。即使座標完全相同,改變順序也可能產生不同的外形;而像星形或箭頭形這類凹形狀,正是刻意以這樣的點序編寫,讓向內的凹折構成可辨識的輪廓。
自相交的多邊形可能會產生意外的填色結果,因此產生器會驗證語法與邊界,但並不聲稱每一種點序在視覺上都實用。如果某個形狀看起來不對,試著先反轉順序,再調整數值。多邊形會自動封閉,也代表最後一條可見的邊是繪製在最後一個頂點與第一個頂點之間,而不是在最後一個頂點與多餘的重複點之間。
版面、聚焦與效能注意事項
裁切純粹是一種繪製操作。裁切區域外的內容會被隱藏,但元素仍佔據原本的矩形版面空間,因此周圍元素不會受影響。對於圖片上的裝飾輪廓來說,這是個有用的特性,但這也代表裁切掉一個角落可能會縮減控制項的可見或可互動區域。不要把重要的文字、鍵盤聚焦指示或觸控目標裁切掉。針對圖片,請保留具意義的替代文字;針對控制項,請仔細測試指標與鍵盤行為,並避免只用裝飾性的輪廓作為用途的唯一信號。
效能考量同樣重要。被視覺裁切的圖片仍會以其原始尺寸下載,因此同一張 4000 像素寬的相片,即使在 400 像素寬的手機上也會被請求下載,除非你另外提供較小的檔案。clip-path 宣告本身的渲染成本很低,但背後的素材並不低廉,因此請搭配尺寸合適的來源檔使用。由於產生完全在用戶端執行,這個工具本身不會為你的頁面增加任何依賴;它只是幫你序列化一段有效的多邊形,而設計品質、無障礙性與效能仍需在最終頁面中進行測試。
瀏覽器支援與替代方案
使用 polygon() 值的 clip-path 屬性在目前的常青瀏覽器中已獲得廣泛支援,包括 Chrome、Edge、Firefox 與 Safari。較舊的版本與某些小眾引擎可能完全不支援此屬性。當輪廓並非必要時,可在該屬性上不設定樣式來提供合理的矩形替代方案,因為未套用樣式的渲染本身就是自然的回退。當輪廓具有意義時,請採用能在缺少支援時仍然存活的方式,例如使用 SVG 遮罩或提供替代素材。
在多邊形之間進行動畫時,通常在兩個形狀擁有相容順序的相同頂點數時效果最佳。如果你打算把一個外形的動畫轉變成另一個,請保持頂點數不變,一次只調整一個點。在不相容的外形之間進行動畫可能會導致瀏覽器退回離散步驟,這往往看起來很突兀。如需關於該屬性語法與參考框行為的權威指南,請參閱 MDN 上的 clip-path 參考資料;W3C CSS Shapes 模組 則定義了百分比座標如何對應到參考框。
對於想把多邊形裁切與相關視覺處理結合的設計師來說,免圖片 CSS 對話泡泡製作指南 展示了類似的多邊形技巧如何產生帶有尾巴的標註。每個工具都只序列化一段範圍明確的宣告,因此它們可以組合而不會產生衝突的規則。
延伸閱讀:CSS 圓角半徑:像素與百分比及角落順序。