60px 0);-ms-clip-path:polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);-o-clip-path:polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);clip-path:polygon(30px 30px,0 0,60px 0,60px 0,60
1、polygon( , , …, )定义了每一个点的坐标,起点是从左上角开始计算的,可以用百分百,也可以用px等单位。 .polygon1 { clip-path: polygon(50% 0px,100%100%, 0px100%) } .polygon2 { clip-path: polygon(0px50%,50%0,100%50%,50%100%) } clip-path: polygon(25%0%,75%0%,100%50%,...
border-radius:6px6px00; --clip-path:polygon(00,100%0,100%calc(100%-22px),calc(100%-2px)calc(100%-18px),calc(100%-6px)calc(100%-16px),calc(15%+18px)calc(100%-16px),calc(15%+9px)calc(100%-6px),15%calc(100%-16px),0calc(100%-16px),6pxcalc(100%-16px),2pxcalc(1...
1.clip-path: polygon() 多边形切割 //多边形切割 polygon(x轴点位 y轴点位, x轴点位 y轴点位 ...)clip-path:polygon(00,25%0,100%75%,100%100%,00); 2.clip-path: circle() 圆形切割 //圆形切割 circle(圆角程度 at 圆角圆心x 圆角圆心y )clip-path:circle(40%at50%50%); 3.clip-path: ell...
多边形polygon 值为多个坐标点组成,坐标第一个值是x方向,第二个值是y方向。 如下图: Inset内部裁剪 这个值和上面的不太一样,主要是裁剪,和margin有点像。但是又不太完全一样,如下图 值为(上右下左 round 左上角radius 右上角radius 右下角radius 左下角radius) ...
clip-path:inset(0005pxround5px); } .message-text::after{ clip-path:polygon(0%23px,5pxcalc(23px+5px),5pxcalc(23px-5px)); } 总结 clip-path可以剪裁出各种不规则的形状,使用的好可以简化我们的工作,同时也可以实现很多特殊的效果,是非常值得大家去学习和运用~ ...
polygon(): 定义一个多边形 //语法polygon(<fill-rule>?,[<length-percentage><length-percentage>]#)//说明<fill-rule>可选,表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero 后面的每对参数表示多边形的顶点坐标(X,Y),也就是连接点//顺序 顺时针方向//示例clip-path:polygo...
shape 基础形状:inset 矩形,circle 圆,ellipse 椭圆,polygon 多边形 source SVG 绘制图形: path 2.2 例子 注意: 1.裁剪只对 fixed 和 absolute 的元素有效。 2.top,right,bottom,left 相对于元素的各边界。 .box {/* inset 矩形:inset(top,right,bottom,left,round radius)*/clip-path: inset(10px 10px ...
clip-path可以很容易地使用polygon、ellipse、circle或inset关键字中的任何一个来裁剪基本形状,这些关键字是CSS 排除模块的一部分。 多边形 Polygon 是所有可用形状中最灵活的,因为它允许您指定任意数量的点,有点像SVG path。提供的点是成对的 X 和 Y 坐标,可以是任何单位(例如:基于像素或百分比)。因为它是最灵活...
四角都变圆角:clip-path: inset(25% 25% 25% 25% round 25% 25% 25% 25%);也可简写为:clip-path: inset(25% round 25%); polygon能创建多组顶点,用来创建任何你能想象的任何复杂形状。文末有各种形状创建的例子。 clip-path也可以用来创建动画,题头动画就是用clip-path创建的,两个形状之间的过渡看起...