CSS裁剪路径生成工具

CSS Clip-Path 產生器是一個用於建立和測試 CSS clip-path 屬性的視覺化工具。Clip-path 可讓您將元素裁剪成基本形狀（圓形、橢圓形、多邊形）或 SVG 路徑。此工具提供即時預覽和程式碼生成功能,協助您為網路專案設計自訂形狀。

點擊預設面板中的任何預設形狀按鈕即可立即套用。工具包含 12 種內建形狀：三角形、梯形、平行四邊形、五邊形、六邊形、七邊形、八邊形、星形、圓形、橢圓形、內嵌框和圓角內嵌。預覽會立即更新,顯示形狀如何裁剪元素。

在自訂路徑輸入欄位中輸入任何有效的 clip-path 值。支援所有 clip-path 函式：polygon()、circle()、ellipse()、inset() 和 path()。工具會顯示包含標準和 -webkit- 前綴的 CSS 程式碼,以獲得最大的瀏覽器相容性。點擊複製按鈕將程式碼複製到剪貼簿。

多邊形建立器提供視覺化介面來建立自訂多邊形。每個點由 X 和 Y 座標定義（0-100%）。新增更多點（至少 3 個）以建立複雜的多邊形,或移除點以簡化。當您調整座標時,建立器會自動產生有效的 CSS polygon() 語法。

透過調整尺寸滑桿（100-400px）和使用顏色選擇器來變更元素背景顏色,以自訂預覽。這些調整可協助您視覺化 clip-path 在不同元素尺寸和顏色下的呈現效果。

CSS clip-path 在所有現代瀏覽器中都受到支援。工具會自動包含 -webkit-clip-path 以相容 Safari。請注意,使用 path() 函式的 clip-path 在舊版瀏覽器中的支援有限。部署到正式環境前,務必測試您的目標瀏覽器。