css属性clip-path的使用说明

前言

当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的介绍就到这里，如果觉得自己去写太麻烦的话，网上也有一个工具，仅供参考。