运用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.内置矩形 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 动画虽然美好，但是存在一定的局限性，那就是进行过渡的两个状态，坐标顶点的数量必须一致。
这里有一个讨巧的办法，可以通过设置重合的点来保持顶点数量的一致。
