这是我参与8月更文挑战第7天，活动详情查看：8月更文挑战
俗话说，无规矩不成方圆。
俗话又说，规矩是死的，人是活的。
今天用clip-path来展现几个“不正经”的图形。变换很多，了解用法后项目中可自行尝试。
clip-path: circle（半径 at （x， y）） at 后面可以使用坐标也可以用位置名（left，top，right，bottom）也可以省略
1、圆：之前我们都是border-radius改变圆角来形似圆，我们还可以直接（注意浏览器兼容性，以下只写一种）
clip-path: circle(50%); -webkit-clip-path: circle(50%);
2、半圆：
clip-path: circle(50% at top);
3、扇形（四分之一圆）
clip-path: circle(50% at 0 0);
4、拼接（上正下圆）
clip-path: circle(80% at top);
上图：
clip-path: polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) 定义了每一个点的坐标，起点是从左上角开始计算的，可以用百分百，也可以用px等单位
5、菱形
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
6、漏洞
clip-path: polygon(50% 100%, 50% 50%, 0% 100%, 0 50%);
7、梯形
clip-path: polygon(100% 0, 75% 100%, 25% 100%, 0 0);
8、闪电（你叫啥都行）
clip-path: polygon(40% 0, 50% 50%, 20% 50%, 30% 100%);
上图：
觉得没啥用？ 别急，十分钟撸个简单的手机页面：🙋put your hands up 有几个clip-path
