CSS 工作流程
CSS clip-path polygon：座標、裁切與焦點界線
多邊形會裁切元素繪製的內容，不會改變版面盒子。先用視覺編輯建立輪廓，再以實際尺寸、內容與鍵盤焦點檢查目標元件。
內容更新： · 維護者與修正回報
座標相對於參考盒子
polygon() 的每組座標先是 X，再是 Y。X 百分比由參考盒子左側按寬度計算；Y 百分比由頂端按高度計算。HTML 元素使用基本形狀、未指定 geometry-box 時，clip-path 預設以 border-box 為參考。
50% 50% 始終在中心，但寬高改變時，外觀也會改變。可在不改座標的情況下比較 1:1、16:9 與 9:16。這些預覽不產生 media query、不鎖定目標元素比例，也不保證複製後的形狀放得下內容。
頂點順序決定連線
瀏覽器按列表順序連接頂點，最後一點自動接回第一點。產生器不按角度排序，因此重排可能改變輪廓或形成交叉邊。插入頂點會放在選取點與下一點之間的中點，四捨五入至一位小數。
凹形與自交多邊形都是有效 CSS。本工具保留預設 nonzero 填滿規則，交由原生 CSS 渲染。有符號面積為零，不一定表示自交形狀不可見。工具只在全部頂點共線或重合時提示；語法仍有效，所以依然可複製宣告。
裁切影響外觀，不是排版或安全遮蔽
clip-path 會限制元素的繪製範圍，包含背景、子元素與外框；不改變元素本身的幾何尺寸，也不會讓旁邊文字沿多邊形排版。被裁掉的區域不接收指標事件。非 none 的 clip-path 也會建立堆疊環境。
不要用裁切隱藏機密內容：底層 HTML 或圖片仍然存在。預覽不是安全或無障礙驗證；請在實際元件檢查文字換行、縮放、焦點狀態與點擊範圍，不能只看裝飾範例。
讓焦點與陰影留在裁切表面之外
被裁切元素的 outline 本身也可能被裁掉。可把裝飾裁切放在內層表面，重要文字、控制項與可見焦點放在未裁切的外層。下方範例是待測試的結構，不代表自動符合 WCAG。
同一個被裁切元素上的 box-shadow 也會被裁切。外層容器可以保留矩形盒形陰影，但不會自動沿多邊形輪廓繪製。沿輪廓的 filter 是另一種效果，本工具不產生。請在支援的瀏覽器檢查鍵盤、指標、強制色彩與窄螢幕行為。
了解工具範圍與隱私界線
本工具接受 3–12 個頂點、0–100% 的 X／Y，最多一位小數。空白、非有限數值、科學記號、超出範圍及附帶單位的輸入會被拒絕，不會偷偷修正。這是編輯器限制，不是 polygon() 語法限制。指標移動會停在框線內；選用的 5% 吸附只用於拖曳，方向鍵仍移動 1%，搭配 Shift 為 10%。
無效欄位會暫停預覽、CSS 輸出與複製，直到全部標記頂點修正。剪貼簿操作失敗時，仍可手動選取程式碼。設定只留在目前頁面記憶體，不上傳、不儲存、不寫入網址，也不記錄輸入值分析事件。首版不匯入 CSS、不載入圖片、不編輯 circle／ellipse／inset／曲線、不輸出 SVG，也不播放動畫。瀏覽器原生渲染可能略有差異；發布前請測試實際元件。
.card { position: relative; isolation: isolate; padding: 2rem; }
.card::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: #315460;
clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.card:focus-visible { outline: 2px solid #315460; outline-offset: 4px; }資料可信度