CSS clip-path 裁剪產生器
免費線上 CSS clip-path 產生器。支援 polygon、circle、ellipse、inset 四種模式，頂點可拖曳，即時預覽並一鍵複製 CSS 程式碼。
什麼是 CSS clip-path？
clip-path 是一個 CSS 屬性，可以把元素裁剪成基本形狀或路徑。形狀以外的部分會被隱藏，因此無需修改圖片本身，就能把矩形圖片或容器變成三角形、圓形、六邊形、斜切橫幅或任意自訂多邊形。
哪些瀏覽器支援 clip-path？
所有現代瀏覽器都支援本產生器使用的基本形狀函式：polygon()、circle()、ellipse() 和 inset()，包括 Chrome、Edge、Firefox、Safari 和 Opera。只有非常老舊的行動版 Safari 才需要 -webkit-clip-path 前綴寫法。
polygon 模式怎麼用？
在 polygon 模式下，預覽區會把每個頂點顯示為可拖曳的圓點。拖動圓點即可移動頂點；在空白處雙擊可插入新頂點；點擊圓點選取後，按刪除按鈕即可移除。CSS 值會以百分比座標即時更新。
polygon() 裡的百分比是什麼意思？
每個頂點寫成 X Y 兩個百分比，從元素左上角開始計算。由於數值相對於元素尺寸，形狀會隨元素縮放，在任何螢幕寬度下都保持響應式。
circle、ellipse 和 inset 有什麼區別？
circle(半徑 at x y) 裁剪出正圓；ellipse(rx ry at x y) 可分別設定水平和垂直半徑；inset(上 右 下 左) 則是從四邊向內收縮裁剪出矩形。本工具為所有參數都提供了滑桿和數值輸入。
clip-path 會影響版面或點擊嗎？
clip-path 只是視覺裁剪。元素在版面中仍保留原始盒子，周圍內容不會移動。但點擊等指標事件只落在裁剪後的可見區域內，這正好可以用來製作異形按鈕。
clip-path 可以做動畫嗎？
可以。當兩個 clip-path 值使用相同的形狀函式且頂點數量一致時，瀏覽器可以平滑過渡，例如從大 inset 過渡到小 inset，或兩個頂點數相同的 polygon 之間變形。用 CSS transition 屬性即可實現。
我的圖片或資料會被上傳嗎？
不會。預覽圖是 Canvas 在本地繪製的漸層範例圖，所有計算都在瀏覽器中完成。你設計的任何內容都不會傳送到伺服器，頁面載入後離線也能使用。
clip-path 有哪些常見用途？
常見用途包括斜切 Hero 區塊、六邊形或圓形頭像遮罩、三角形氣泡箭頭、創意圖片拼貼、卡片切角按鈕等，完全不需要影像處理軟體。
如何使用CSS clip-path 裁剪產生器
用 CSS clip-path 為任意元素塑形，無需修圖。選擇形狀函式、拖曳控制點，即可複製可直接使用的 CSS。全部在瀏覽器本地完成。
- 選擇模式：Polygon（多邊形）、Circle（圓形）、Ellipse（橢圓）或 Inset（內縮）。
- 多邊形模式下拖曳頂點圓點；雙擊空白處新增頂點；點擊選取頂點後可刪除。
- 圓形、橢圓、內縮模式用滑桿微調參數，也可以直接輸入精確的百分比數值。
- 預覽區基於本地產生的漸層範例圖即時更新裁切效果。
- 複製單行 clip-path 規則，貼到你的樣式表中即可使用。
讓兩個狀態的 polygon 頂點數量保持一致，就能用 CSS transition 實現平滑的形狀變形動畫。
相關工具
- CSS 陰影產生器 免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
- CSS 漸層產生器 視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。
- CSS格式化工具 即時格式化和美化CSS程式碼，將壓縮的CSS轉換為可讀的、縮排良好的程式碼，支援自訂選項。
- CSS壓縮器 免費線上CSS壓縮工具。即時壓縮和最佳化CSS程式碼，移除空白、註解和多餘字元。減小檔案體積，提升網頁載入速度。