運用clip-path的純CSS形狀變換
clip-path練習
clip-path 可以用來裁剪你想要的形狀
一吱肌、圖形
1.圓形 circle(半徑 at 圓心坐標)
clip-path:circle(50% at 50% 50%);
2.橢圓形 ellipse(長、短軸半徑 at 圓心坐標)
clip-path:ellipse(25% 50% at 50% 50%);
3.內(nèi)置矩形 inset(上右下左的邊距 round 上右下左圓角)
clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0); }
4.多邊形 polygon(點的坐標)
三角形、正方形勿决、菱形挠说、正五邊形刽肠、正六邊形等等
clip-path:polygon(0% 100%, 50% 0%,100% 100%);
二搏屑、動畫
clip-path 另外一個強大之處在于可以進行 CSS transtion 與 CSS animation锨并，也就是過渡和動畫。
clip-path 動畫雖然美好睬棚，但是存在一定的局限性，那就是進行過渡的兩個狀態(tài)解幼，坐標頂點的數(shù)量必須一致抑党。
這里有一個討巧的辦法，可以通過設置重合的點來保持頂點數(shù)量的一致撵摆。
