CSS Clip-Path Generator

關於本工具

CSS Clip-Path產生器為四種形狀類型建立clip-path值：circle()、ellipse()、inset()和polygon()。clip-path定義元素的可見區域，形狀外的部分被隱藏。

無需SVG檔案即可建立創意版面、圖片遮罩和英雄區域形狀。所有參數即時更新預覽。

使用方法

1. 選擇形狀類型：circle、ellipse、inset或polygon。
2. 調整滑桿設定形狀參數。
3. 對於多邊形，從清單中選擇預設形狀。
4. 調整設定時即時預覽會更新。
5. 點擊複製將CSS複製到剪貼簿。

使用情境

英雄區域使用對角線或曲線clip-path作為視覺分隔。個人圖片使用circle()。按鈕懸停效果使用clip-path動畫。

常見問題

• clip-path影響可點擊區域嗎？ — 是的，被裁切的區域無法點擊。應用於互動元素時請注意。
• 可以為clip-path新增動畫嗎？ — 可以。具有相同頂點數的兩個多邊形形狀之間可以過渡和動畫。
• 所有瀏覽器都支援clip-path嗎？ — 是的，所有現代瀏覽器都完全支援。