CSS clip-path 產生器

這是一款免費的線上工具，能讓您透過直覺的拖曳操作，輕鬆設計與產出 CSS 的 clip-path 屬性程式碼。

以往在進行圖片不規則裁切時，總是需要手動計算並調整座標比例。有了這款工具，您可以直接「視覺化」地拖拉頂點並確認形狀，完成後只需一鍵即可複製程式碼。

除了支援豐富的預設形狀，我們還內建了滑鼠懸停 (Hover) 時的平滑過渡動畫產生功能。

以下介紹 clip-path 常見的四種基本形狀繪製函數：

■ polygon() — 多邊形

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
可指定任意數量的頂點座標，最少需要 3 個頂點，常用於繪製星形、箭頭等不規則圖形。

■ circle() — 圓形

clip-path: circle(半徑 at 中心點X 中心點Y)
指定圓形的半徑長度以及中心點的位置。

■ ellipse() — 橢圓形

clip-path: ellipse(X軸半徑 Y軸半徑 at 中心點X 中心點Y)
與圓形類似，但可以分別設定 X 軸與 Y 軸的不同半徑，藉此繪製出橢圓形。

■ inset() — 內縮矩形

clip-path: inset(上 右 下 左 round 圓角)
指定從元素的邊界向內縮進的距離，並可以選擇性地加入 round 參數來設定矩形的圓角大小。