淘宝客cms网站怎么做,网站备案的原则,网站怎么做七牛云加速,网站文字变白色代码怎么做前言
当ui设计上的图片、div等的形状不是长方形#xff0c;而是多边形的时候#xff0c;就可以借助clip-path这个css属性来实现。 clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示#xff0c;区域外的隐藏。【from: MDN】 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的介绍就到这里如果觉得自己去写太麻烦的话网上也有一个工具仅供参考。
