開發者 / CSS形狀

CSS裁切路徑產生器：多邊形、圓形、橢圓形與內縮

使用六種多邊形預設、可拖曳並用鍵盤調整的頂點，以及圓形、橢圓形和內縮控制項製作CSS裁切效果。預覽漸層或本機圖片，並複製百分比或像素CSS。

CSS裁切路徑產生器：多邊形、圓形、橢圓形與內縮: 將預覽裁切成選定的形狀，不會變更底層圖片檔案。百分比輸出會依照元素尺寸計算。像素輸出會使用參考寬度和高度；顯示的預覽會縮放以符合螢幕。全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

裁切路徑形狀展示台本機處理

全程在瀏覽器中執行

形狀預設CSS 單位參考寬度（px）參考高度（px）

本機圖片預覽（選用）

拖曳編號點、使用其方向鍵，或輸入座標。下方座標以百分比表示；像素輸出會使用參考尺寸。

點1X（％）Y（％）

點2X（％）Y（％）

點3X（％）Y（％）

點4X（％）Y（％）

點5X（％）Y（％）

點6X（％）Y（％）

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

百分比形狀會隨元素調整大小。圓形百分比使用正規化對角線；橢圓百分比使用寬度和高度。像素座標固定於參考尺寸。

CSS裁切

MDN clip-path：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path。裁切會改變可見區域，但不會改變元素的版面配置框。

W3C CSS Shapes Level 1，基本形狀：https://www.w3.org/TR/css-shapes-1/#basic-shapes。多邊形座標和橢圓半徑會根據參考框解析；圓形百分比則使用參考框的標準化對角線。預設座標與漸層為原創 artwork。

選用的圖片預覽會留在你的裝置上。不會上傳任何內容。

不拖曳的話，如何編輯頂點？

聚焦該頂點的編號控制點並使用方向鍵，或在頂點清單中輸入X和Y百分比。多邊形至少需要三個頂點。

這項工具會輸出裁切後的圖片嗎？

不會。它會為HTML元素輸出CSS。本機圖片只會用於預覽。

圓形百分比如何計算？

CSS會使用標準化對角線sqrt((寬度平方 + 高度平方) / 2)作為圓形半徑的參考值。橢圓形半徑則分別使用寬度和高度。

免費工具・使用在瀏覽器中次・免註冊