CSS clip-path 編輯器

視覺化編輯 CSS `clip-path` 形狀:**polygon**(任意多邊形,拖點 / 雙擊刪 / 右鍵在邊上加新點)、**circle**、**ellipse**、**inset**(帶圓角)。9 種預設(三角 / 菱形 / 六邊 / 星 / 箭頭…),輸出 CSS、Tailwind v4 bracket class、SVG path。

預設

編輯器(拖點 / 雙擊刪 / 右鍵加點)

目前 6 個點(右鍵在點後加新點,雙擊刪除)

頂點座標(%)

套用在圖片上預覽

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

›如何使用

從上方預設挑一個起點(三角、菱形、六邊、星、箭頭、平行四邊、圓、橢圓、內縮)。
Polygon 模式:在編輯器拖點調位置 · 雙擊刪掉這個點 · 右鍵在這點之後加一個新點。
Circle / Ellipse / Inset 模式:右側滑桿調中心、半徑、四邊內縮、圓角。
右下圖示展示套用在實際照片上的效果(避免你以為 clip-path 只在純色上看起來好看)。

Tips

polygon 至少需要 3 個點 — 刪到只剩 3 個會鎖住。
Tailwind v4 bracket class 把空白換成 \_ 讓 class 名稱合法,可直接複製貼進
。
SVG path 適合做元素或當 mask:把放進 SVG defs。
對標 bennettfeely.com/clippy:Clippy 是經典但 10 年沒大更新;我們補上 Tailwind v4 bracket class 與 SVG path 輸出。

💡 clip-path 在 Safari / Chrome / Firefox 都支援,IE 全不支援(已 EOL);舊版 Edge 用 -webkit- 前綴。

CSS clip-path 編輯器

相關工具