clip-path有三種屬性

第一種 circle 畫圓
clip-path: circle(30%); 30%為半徑大小
clip-path: circle(50% at 50% 50%); 后面的50%為圓心位置

第二種 ellipse 橢圓
clip-path: ellipse(32% 43% at 49% 50%); 32%為寬 43%為高 后面兩個49%，50%為圓心位置

第三種 polygon 多邊形
clip-path: polygon(14% 10%, 100% 9%, 100% 100%, 0 83%);
幾個逗號就是幾個描點 這個例子為四個，說明是四邊形，每組的第一個參數是x軸距離，第二個參數為y距離，距離0,0為畫圖開始的左上角

這是簡單的文字參數說明
想要畫更強大的css多邊形可用下面鏈接神器
https://www.html.cn/tool/css-clip-path/ 多邊形生成器，自動生成你想要的多邊形css樣式

總結

以上是生活随笔為你收集整理的css裁剪clip-path画多边形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。