CSS 多邊形裁切產生器

拖曳或精確編輯多邊形節點，即時預覽 clip-path 並匯出 CSS。

拖曳節點或使用方向鍵調整，按住 Shift 可加大步幅，也能直接修改座標。

CSS

起始形狀

三角形菱形六角形星形斜切

內容僅在此瀏覽器處理，不會上傳或儲存。

工具介紹

製作斜切面板或多邊形徽章，不必另外準備圖片遮罩。

設計工具

先選擇三角形、菱形、六邊形等預設，再拖曳節點或編輯 X、Y 百分比來調整輪廓。可新增或刪除節點；用 Tab 聚焦節點後，以方向鍵微調，按住 Shift 可加大步長。

支援 3–32 個節點，座標介於 0–100%，依清單順序連線並封閉。輸出的 clip-path: polygon(...) 與預覽一致，可複製或下載。此工具不產生曲線路徑，也不匯出裁切後的圖片。

支援 3–32 個頂點的多邊形，各軸座標限 0%–100%；不支援曲線或超出邊界的頂點。

節點按清單順序連接，最後一點再接回起點。節點跨過其他邊時，輪廓可能自相交。建議先選預設形狀，再依外框順序調整節點；可刪除多餘節點，但至少保留三個。