CSS clip-path 產生器
一款直覺式的 CSS clip-path 產生工具。透過拖曳即可輕鬆裁切出多邊形、圓形與橢圓形，並瞬間為您產生可立即使用的 CSS 程式碼。
編輯器
在畫布上點擊可新增頂點。拖曳可移動位置，點擊右鍵可刪除頂點。
預覽設定
懸停 (Hover) 動畫設定 (非必填)
啟用此功能將會為您產生帶有過渡效果 (transition) 的 clip-path 程式碼。如果是多邊形，請確保兩者的頂點數量一致才能產生平滑動畫。
目前正在編輯基礎狀態 (Base state) 的形狀。切換至懸停狀態即可設定滑鼠移入時的形狀。
輸出的程式碼
關於 CSS clip-path 產生器
這是一款免費的線上工具，能讓您透過直覺的拖曳操作，輕鬆設計與產出 CSS 的 clip-path 屬性程式碼。
以往在進行圖片不規則裁切時，總是需要手動計算並調整座標比例。有了這款工具，您可以直接「視覺化」地拖拉頂點並確認形狀，完成後只需一鍵即可複製程式碼。
除了支援豐富的預設形狀，我們還內建了滑鼠懸停 (Hover) 時的平滑過渡動畫產生功能。
使用方法
1️⃣ 選擇基礎形狀
從上方的預設集或是形狀頁籤中，挑選一個您喜歡的基礎圖形開始。
2️⃣ 微調與設計
在畫布上拖曳頂點來改變形狀。在多邊形模式下，點擊空白處可新增頂點，點擊右鍵則可刪除頂點。
3️⃣ 複製語法
確認預覽效果滿意後，點擊「複製」按鈕，即可將語法貼上並應用至您的專案中。
clip-path 屬性與形狀函數說明
以下介紹 clip-path 常見的四種基本形狀繪製函數：
■ polygon() — 多邊形
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
可指定任意數量的頂點座標，最少需要 3 個頂點，常用於繪製星形、箭頭等不規則圖形。
■ circle() — 圓形
clip-path: circle(半徑 at 中心點X 中心點Y)
指定圓形的半徑長度以及中心點的位置。
■ ellipse() — 橢圓形
clip-path: ellipse(X軸半徑 Y軸半徑 at 中心點X 中心點Y)
與圓形類似，但可以分別設定 X 軸與 Y 軸的不同半徑，藉此繪製出橢圓形。
■ inset() — 內縮矩形
clip-path: inset(上 右 下 左 round 圓角)
指定從元素的邊界向內縮進的距離，並可以選擇性地加入 round 參數來設定矩形的圓角大小。
常見問題
- Q.使用 clip-path 會影響 SEO 嗎？
- 不會。clip-path 屬性只會影響視覺渲染結果，並不會改變 HTML 的 DOM 結構或文字內容。被裁切掉 (隱藏) 的區域中的文字，搜尋引擎仍然能正常辨識並收錄。
- Q.CSS 的 clip-path 和 SVG 的 clipPath 有什麼不同？
- CSS clip-path 完全在樣式表中運作，使用內建的形狀函數。而 SVG clipPath 則是定義一個 SVG 元素，並透過 CSS 去參照它。CSS 寫法較為簡潔，但若需繪製極度複雜的自訂路徑，則適合使用 SVG。
- Q.我可以為 clip-path 加入滑鼠懸停 (Hover) 的動畫嗎？
- 可以。只要搭配 transition 屬性，就可以製作平滑的動畫。但請注意，如果使用的是 polygon() (多邊形)，懸停前後的「頂點數量」必須完全一致，動畫才能正常運作。
- Q.被裁切掉 (看不見) 的區域還能被點擊嗎？
- 不能。被裁切到元素邊界之外的區域，無法觸發點擊或懸停 (hover) 等滑鼠事件 (Pointer events)。這可以確保互動元素的點擊範圍符合視覺預期。
- Q.上傳圖片會有隱私或安全風險嗎？
- 完全沒有。包含上傳與預覽圖片在內，所有的處理過程都在您的瀏覽器端 (前端) 本地執行，圖片絕對不會被上傳到任何伺服器中。
使用場景
對角線裁切的英雄區塊 (Hero Sections)
為網站最上方的第一印象區塊 (Hero Header) 製作不規則、傾斜或對角線的圖片裁切，創造動態感。
獨特的個人頭像 (Profile Images)
突破傳統圓形或方形頭像的限制，將團隊成員的照片裁切成吸睛的六角形、星形或特殊形狀。
滑鼠懸停揭露特效 (Reveal-on-Hover)
初始狀態只顯示小部分圖片，當使用者滑鼠移入時，平滑展開以顯示完整圖片內容的動畫效果。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.