clip-path 產生器

運作方式

clip-path 會把元素裁成一個輪廓。形狀以外的任何部分都不會被繪製，也無法點擊，這讓它成為真正的形狀，而不是形狀的圖片，而且它適用於任何元素，包括圖片與影片。

用百分比，而非像素

多邊形的點以元素自身寬度與高度的百分比表示，因此形狀會隨元素伸縮，而不會在不同尺寸下走樣。這讓它能用於響應式版面。

點擊會跟隨形狀

這正是 clip-path 與裝飾性覆蓋層的區別所在。被裁掉的區域完全不會接收指標事件，因此三角形的按鈕對滑鼠來說和對眼睛來說都是三角形的。

在形狀之間做動畫

只有當兩個多邊形列出的點數相同時，一個多邊形才能平滑地轉換成另一個。常見的技巧是用重複的點把較簡單的形狀補齊，讓點數一致，例如將三角形寫成四個點（其中兩個位置相同），就能變形為正方形。

-webkit- 那一行

目前的瀏覽器只需要無前綴的屬性。包含有前綴的副本，是因為某些較舊版本的 Safari 仍然需要，而且留著它不需要任何成本。

它不做什麼

它只負責裁切，不會重新排版。周圍的文字仍會把元素視為原本的矩形。若要讓文字環繞形狀，您需要使用 shape-outside，其語法相同。