CSS3的“clip-path”,这个“clip-path”看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升,自然而然的就可以用它来做些与众不同的变化。 运用clip-path超强的网站 最先看到这个属性的应用,...
-webkit-clip-path:circle(50%at50%50%); } AI代码助手复制代码 椭圆 View this code on codepen 很多时候,你不需要一个简单的圆,而是一个椭圆。 为了实现椭圆,需要给ellipse提供4个值:椭圆的x轴半径、y轴半径、定位椭圆位置的x坐标和y坐标,后面两个值用at关键字和前面两个值分开。 .clipClass{ -webkit-...
clip-path: polygon(50% 0px, 100% 100%, 0px 100%) } .polygon2 { clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%) } .polygon3 { clip-path: polygon(0% 60%, 20% 0%, 60% 0%, 40% 60%) } polygon 值为多个坐标点组成,坐标第一个值是x方向,第二个值是y方向。 左...
利用clip-path,我们可以创建圆形、椭圆和多边形等不同的形状,创造力是的限制。 一个简单的三角形裁减 View the code on codepen 对元素简单地运用clip-path就能实现上面的效果: .clipClass { -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); } 逐步分析 很像定位属性,我们需要考虑X值和Y值。X...
CSS3的“clip-path”,这个“clip-path”看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升,自然而然的就可以用它来做些与众不同的变化。
clip-path的使用 polygon 值为多个坐标点组成,坐标第一个值是x方向,第二个值是y方向。 左上角为原点,右下角是(100%,100%)的点。 body { background-color: #000; } .fa { border: 1px solid #fff; color: yellowgreen; padding: 10px;
我们只需要利用clip-path,在最开始的时候,将一个矩形 div,利用clip-path: circle(20px at 44px 44px)裁剪成一个圆,当 hover 的时候,扩大裁剪圆的半径到整个矩形范围即可。 效果如下: 这样,我们就能完美的实现题图的效果,并且,内置的 DOM 元素,直接写进这个 div 内部即可。