有时候设计图要求做矩形图片剪裁，直接div覆盖会导致没有圆角，写起来还很麻烦，那有什么办法可以让我们快速实现呢
比如这样六边形
比如八边形
或者更复杂，比如这样
这时候我们用到一个利器
clipPath
但是手写path，难度特太大了吧，简单的还好说。
path
注意 这是可选读，不影响整个文章，不感兴趣可以跳过
这个用难度有点像打开Windows系统自带的画图软件没用鼠标画一个标准的圆。
像polygon属性，就很好写，写每个点的位置就好了。但是，圆角怎么办。。搞不定啊，如果规则的圆好搞。不规则怎么办。。
我们先看看path有哪些属性
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto （三次贝塞尔曲线到）
- S = smooth curveto （光滑三次贝塞尔曲线到）
- Q = quadratic Bézier curve （二次贝塞尔曲线到）
- T = smooth quadratic Bézier curveto （光滑二次贝塞尔曲线到）
- A = elliptical Arc （椭圆弧）
- Z = closepath
一般都是M开头，先把起点位置移动过去。 然后开始操作，最简单的就是用L画路径，比如
<path d="M150 0 L75 200 L225 200 Z" />
这是一个三角形，M两个坐标 x，y, l第一次到75，200,第二次到255,200 然后Z就是自动完成封闭（当然你也可以不封闭，或者用l自己移动过去）
但是不够灵活，比如我要画一个矩形，我不能每次都去计算位置，超级麻烦。
这是可以用H，V来实现基于之前坐标不动来修改对应的横坐标，或者纵坐标。
上面都是直线，用直线虽然也可以做圆，但是太幸苦一点了吧，这时候我们可以用贝塞尔曲线。
这里我们只需要用到二次贝塞尔曲线就可以
M 100 350 q 150 -300 300 0
比如这个就一个简单曲线
然后我们分别计算矩形的几个边，然后再计算圆的角度大小，然后再根据角度计算相交点，然后画个曲线。
具体怎么写，我写不出来。
我们还是用可视化工具吧，接下来我们说说怎么用工具完成这个事儿。
Figma画矩形
Figma是在线做UI网站，可以免费使用，我们新建一个画布，然后
三步就完成一个矩形了
这时候我们选择导出svg，然后把path复制过去就可以了。
如：八边形圆角
<img style={{ width: 100, height: 100, objectFit: 'cover',
clipPath: `path('M52.1048 1.41302L82.8679 14.1555C84.2155 14.7137 85.2863 15.7844 85.8445 17.1321L98.587 47.8952C99.1452 49.2429 99.1452 50.7571 98.587 52.1048L85.8445 82.8679C85.2863 84.2155 84.2156 85.2863 82.8679 85.8445L52.1048 98.587C50.7571 99.1452 49.2429 99.1452 47.8952 98.587L17.1321 85.8445C15.7845 85.2863 14.7137 84.2156 14.1555 82.8679L1.41302 52.1048C0.8548 50.7571 0.854799 49.2429 1.41302 47.8952L14.1555 17.1321C14.7137 15.7845 15.7844 14.7137 17.1321 14.1555L47.8952 1.41302C49.2429 0.8548 50.7571 0.854799 52.1048 1.41302Z')`,
}} src={item.url} />
六边形
clipPath: `path('M36.25 3.05181C41.0457 0.283006 46.9543 0.283006 51.75 3.05181L79.0513 18.8142C83.847 21.583 86.8013 26.7 86.8013 32.2376V63.7624C86.8013 69.3 83.847 74.417 79.0513 77.1858L51.75 92.9482C46.9543 95.717 41.0457 95.717 36.25 92.9482L8.94873 77.1858C4.15301 74.417 1.19873 69.3 1.19873 63.7624V32.2376C1.19873 26.7 4.15301 21.583 8.94873 18.8142L36.25 3.05181Z')`,
完成 ✅
