前言
当ui设计上的图片、div等的形状不是长方形，而是多边形的时候，就可以借助clip-path这个css属性来实现。
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。【from: MDN】
clip-path可以理解为一把剪刀，将图片、div等剪裁成我们所希望的形状。下面，将着重介绍下clip-path的三个函数，分别是polygon()、circle()、ellipse()
polygon()
假设我们想把图片剪裁成如下图所示的形状。首先，以图片的左上角为坐标轴的顶点，在此处x、y值都为0%， 即为（0%, 0%）。然后我们从灰色点开始，顺时针开始剪裁。
-
灰色：在y轴上，所以x为0；距离y轴顶点大约25%图片高度的位置。即 (0, 25%)
-
橙色：距离x轴顶点大约50%图片宽度的位置，所以x是50%；在x轴上，所以y是0。即(50%, 0)
-
绿色：距离x轴顶点100%图片宽度的位置，所以x是100%；距离y轴顶点大约25%的图片高度的位置，所以y是25%。即(100%, 25%)
-
… 后面的以此类推
最终结果是clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);，这样，我们就得到了六边形的图片。
由此，我们得出结论，polygon函数里的每一个数据对，都是每一个点，相对于左上顶点的位置坐标。
circle()
如下图，将图片剪裁成一个中心点自定义，半径自定义的圆。先来看看最终结果clip-path: circle(50% at 50% 50%);，然后来看看每个数值的具体含义。
- 50%：是指剪裁的圆的半径大小；
- 50% 50%：是指剪裁的圆的中心位置（同样地，也是相对于坐上顶点的位置坐标）。
ellipse()
如下图，将图片剪裁成一个中心点自定义，横向、竖向半径自定义的椭圆。还是先看看最终结果clip-path: ellipse(25% 40% at 50% 50%);，再看每个数值的含义。
- 25%：横向半径；
- 40%：竖向半径；
- 50% 50%：椭圆的中心位置。
结语
关于clip-path的介绍就到这里，如果觉得自己去写太麻烦的话，网上也有一个工具，仅供参考。
