真實版面中的 CSS clip-path 範例

選擇六邊形預設，切換到“僅聲明”輸出，把 clip-path 規則複製到自己編寫的方形圖片樣式中。設定相等的寬高並使用 object-fit: cover；完整示例 CSS 使用 4:3 演示框，不應原樣套在頭像上。檢查面部是否貼近邊緣，修改多邊形也不會自動移動主體。

將箭頭形預設用於按鈕旁的裝飾圖片。比較正方形與寬矩形：百分比座標分別沿兩軸縮放，角度可能改變。再檢查手機寬度。重要文字與連結應留在裝飾裁剪區域之外。

將平行四邊形用於卡片後方的裝飾層。裁剪整個內容容器可能切掉標題、焦點外框或按鈕。預覽不能證明無障礙可用；請在成品中用 Tab 切換並檢查不同寬度。

先選六邊形預設，把第一個頂點設為 X 30%、Y 0%，觀察輪廓變化。可在所選頂點後新增點，或在 3–32 點範圍內刪除點。支援拖曳、輸入 0–100% 座標，以及方向鍵微調（1%；按住 Shift 為 10%）。只複製 clip-path 宣告可保留原有版面；完整 CSS 包含示範樣式。在桌面和手機上比較方形與寬容器，文字和焦點輪廓應放在裁剪層之外，並保留矩形備援。暫不支援匯入 CSS，也不支援編輯 circle、ellipse 或 inset。

本指南及關聯工具由 Toolars 維護。如果說明與目前輸出不一致，請回報，以便一併複核。

下方可下載範例是合成測試輸入，不是客戶案例。重現時保持輸入與設定一致，並按範例要求檢查下載檔案，而不只看預覽。

這些檢查只涵蓋此範例，不代表所有檔案、瀏覽器或目標軟體都通過驗證。工具變更後需要複核，分享前也請檢查自己的輸出。

Toolars 合成樣本 · 更新於 2026-09-13。用於示範操作流程，不代表真實照片、掃描件品質或平台接收結果。

CSS 樣本使用六邊形預設。在 CSS clip-path 選擇六邊形，水平點設為 24、垂直點設為 50。比較下載檔案與樣本的兩條 clip-path 宣告，顏色與空白可以不同。分別測試寬、窄元素：百分比隨元素框變化；裁切本身不會讓周圍文字環繞形狀。

下載輸入樣本