CSS裁剪路径生成工具
免费的在线CSS裁剪路径生成工具,无需安装。具有可视化编辑功能的自定义形状裁剪工具。
關於 CSS Clip-Path 產生器
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 在舊版瀏覽器中的支援有限。部署到正式環境前,務必測試您的目標瀏覽器。
▶CSS clip-path 的用途是什麼?
▶polygon()、circle()、ellipse() 和 inset() 之間有什麼區別?
▶如何建立不規則的多邊形?
▶為什麼我的 clip-path 在某些瀏覽器中無效?
▶我可以為 clip-path 變化製作動畫嗎?
▶多邊形點中的 X 和 Y 百分比是什麼意思?
▶如何使用 SVG 路徑資料搭配 clip-path?
▶多邊形點的數量有限制嗎?
如果这个工具对你有帮助,请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。