設計 · 本機工具
CSS Clip Path Generator
拖曳、使用鍵盤或輸入座標編輯多邊形。從四種預設開始，在本機複製 clip-path 宣告或完整 CSS。
任務路徑 / 從輸入到結果
選擇起始形狀
本機執行 · 不做任何上傳
比較四種多邊形，再到工作區設定相同參數。每個預覽與對應 CSS 使用同一個多邊形；匯出規則的初始尺寸為 240 × 180 px。
前往工作區調整這些參數用六邊形製作團隊頭像或重複排列的徽章。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}用傾斜的菱形裝飾小圖片或頁面細節。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}用四個頂點的傾斜形狀裝飾卡片。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}讓橫幅邊緣指向下一段內容。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}先使用上方任一形狀的 CSS，再在其後加入以下規則。將圖片路徑與替代文字換成自己的內容。容器維持 4:3 比例；object-fit: cover 透過裁切填滿容器，不拉伸圖片。容器縮放時，百分比座標隨之調整。
<img class="clipped-shape"
src="/your-image.jpg"
alt="描述你的圖片"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}目前提供四種範本與兩個滑桿，不支援自由編輯頂點、匯入 SVG 路徑或繪製曲線。自訂後，可在工作區使用複製 CSS 或下載 .css 儲存規則。
任務路徑 / 從輸入到結果
選擇六邊形、菱形、平行四邊形或人字形。兩個滑桿調整預設；單獨編輯頂點後切換為自訂多邊形。
拖曳編號頂點或輸入座標。聚焦頂點後，方向鍵移動 1%，Shift + 方向鍵移動 10%。新增操作會在所選頂點與下一頂點之間插入中點。
完整範例包含所選顏色、240px 寬度及 4:3 寬高比。編輯區會依螢幕縮放。
匯出前檢查所有邊。編號控制點僅用於編輯，不會出現在匯出的 CSS 中。
CSS 輸出: 僅 clip-path 宣告 / 完整範例 CSS. 完整範例包含所選顏色、240px 寬度及 4:3 寬高比。編輯區會依螢幕縮放。
百分比座標隨元素尺寸縮放。將宣告貼到現有規則中，或使用完整範例的 .clipped-shape 類別，並檢查桌面與行動版效果。
CSS clip-path 產生器 使用經過驗證的本機執行路徑，不會建立隱藏的輸入或輸出歷史記錄。
在目前瀏覽器分頁內執行。
使用中的工具資料絕不會成為 Toolars 的文件記錄。
無需建立帳戶即可使用核心工作流程。登入後收藏才會同步至你的帳戶。
關閉分頁，目前的工作資料即刻消失。
2026-09-24 本機瀏覽器實測：從預設六邊形開始（水平點 24%、垂直點 50%），選取第 1 點，將 X 從 24% 改為 30%，顏色設為 #ff6600。預覽呈橘色六頂點多邊形，clip-path 為 polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%)；其餘五點的順序不變。
完整範例 CSS 使用 .clipped-shape、寬度 240px、寬高比 4 / 3、背景 #ff6600，並同時寫入 -webkit-clip-path 與 clip-path。點選複製 CSS 的結果與下載的 toolars-clip-path.css 一致（240 位元組）；切換為僅裁切宣告時，複製得到 clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);（UTF-8 共 73 位元組）。請在自己的版面中檢查實際裁切。
將第 1 點 X 設為 101%。2026-09-24 實測工作區提示座標必須是 0–100% 的有限數值，預覽與產生的 CSS 清空，複製和下載按鈕停用。把 X 改回 30% 後恢復 polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%)，即可再次複製。交叉邊緣不會自動修復。
從四種預設開始，新增、刪除或移動多邊形頂點，匯出 clip-path 宣告或完整範例 CSS。 百分比座標隨元素尺寸縮放。將宣告貼到現有規則中，或使用完整範例的 .clipped-shape 類別，並檢查桌面與行動版效果。
常見問題