CSS clip-path 視覺裁切產生器

拖曳多邊形頂點、精確編輯百分比座標，比較不同長寬比例，並在本機複製原生 clip-path CSS。

02 / 即時裁切

移動頂點，看見輪廓

六邊形

拖曳吸附 5% 格線顯示被裁掉的區域

拖曳編號頂點；Tab 選取後用方向鍵移動 1%，Shift＋方向鍵移動 10%。Esc 取消這次拖曳。重疊頂點可從頂點清單選取。

比例只改變預覽尺寸，不改座標或建立斷點。編號、格線與底色不會被複製。

03 / 精確編輯

6 / 12

編輯頂點 1

X (%)

Y (%)

3–12 個頂點；X／Y 為 0–100%，精度 0.1%。這是工具範圍，不是 CSS 限制。按列表順序連線，最後自動接回第一點；凹形與自交形狀交由原生 nonzero 規則填滿。

04 / CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

只裁切外觀，不改版面空間。請在實際元件檢查內容、點擊範圍與焦點外框。設定只留在此頁，不上傳、不儲存，也不寫入網址。

選擇形狀、拖曳編號頂點或輸入 X／Y 座標，再插入、刪除或重排頂點。Tab 與方向鍵可用鍵盤移動；比較長寬比例後複製對應 CSS。

本工具只編輯百分比 polygon()，不處理曲線、圖片遮蔽或任意 CSS 匯入。裁切不改變版面空間，可能裁掉內容及焦點外框；發布前請檢查實際元件。