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