天天看點

css 利用 clip-path 裁剪多邊形,三角形,梯形,六邊形等

clip-path可以把一個div元素裁剪成不同的形狀,換句話說,可以把div元素不想要的部分剪掉。

clip-path從每個點的坐标着手,沿坐标的路徑進行裁剪。

circle(半徑 at 圓心x坐标 圓心y坐标)
ellipse(長軸半徑 短軸半徑 at 圓心x坐标 圓心y坐标)
ellipse(上 右 下 左邊距 round 上 右 下 左圓角)

公共代碼(下方裁剪不同的多邊形時隻需修改polygon裡的值):

繼續閱讀