clip-path: polygon(50% 0, 100% 100%, 0 100%); } 顶点内部形状会被保留,顶点外部形状则会被隐藏掉。 b.同理快速画出个气泡框,一共七个顶点,polygon需要传七个参数,每个参数是顶点的 x 和 y 轴位置百分比: .container { width: 100px; height: 100px; background-color: aqua;-webkit-clip-path:...
clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path:inset(100px50px); clip-path:circle(50pxat0100px); clip-path:ellipse(50px60pxat010%20%); clip-path:polygon(50%0%,100%50%,...
以下是Clip path polygon的详细用法和一些实际示例: 1.语法: clip-path: polygon(x1 y1, x2 y2, x3 y3, ...); -需要指定多边形的每个顶点的坐标。 -坐标可以用百分比、像素或其他单位表示。 -多边形的坐标点按顺时针或逆时针方向指定。 2.创建一个矩形: clip-path: polygon(0 0, 100% 0, 100% 100...
clip-path的参数 1. 基本形状参数: circle(),创建一个圆形剪切区域,需要指定圆心坐标和半径。 ellipse(),创建一个椭圆形剪切区域,需要指定中心坐标、水平半径和垂直半径。 inset(),创建一个矩形剪切区域,需要指定上、右、下、左四个边距。 polygon(),创建一个多边形剪切区域,需要指定多边形的顶点坐标。 2. SVG...
clip-path: polygon( 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30% ); 看不见的顶点 上面实现一个八边形,我们设置了八个点的坐标。但是,我们可以跳出元素框的限制去思考,也就是说要跳出0% - 100%的这个范围。
clip-source: 可以是内、外部的SVG的clipPath元素的URL引用; basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。 geometry-box: 是可选参数。此参数和basic-shape函数一起使用时,可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定,那么它会...
clip-path: ellipse(500px 500px at 50% 50%); } } 4. Polygon polygon()用于定义一个多边形。 参数类型:polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) 其中fill-rule为填充规则,即通过一系列点去定义多边形的边界。 DEMO: html: ...
polygon表示多边形裁剪,第一个参数<fill-rule> 代表了多边形的填充规则,可选值nonzero 和 evenodd,第二个参数是多边形顶点坐标的合集 来看个例子: .lake { width: 200px; height: 200px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, ...
两个切角 图片.png .cover{width:210rpx;height:150rpx;clip-path:polygon(0 8px,8px 0,calc(100% - 8px)0,100% 8px,100%calc(100% - 8px),100% 100%,0 100%,0calc(100% - 8px));} 四个切角 图片.png clip-path: polygon(0 8px, ...