如何在形状内夹一个圆圈
how to clip a circle inside a shape
它是一个形状里面有一个矩形。
-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
如何在里面夹一个圆圈?
改用mask
:
.box {
display: inline-block;
width: 200px;
height: 200px;
background: url(https://picsum.photos/id/100/800/800) center/cover;
-webkit-mask: radial-gradient(circle 40px, #0000 98%, #fff);
mask: radial-gradient(circle 40px, #0000 98%, #fff);
}
<div class="box"></div>
<div class="box" style="width:300px;height:300px"></div>
您可以让它响应如下:
.box {
display:inline-block;
width:200px;
height:200px;
background:url(https://picsum.photos/id/100/800/800) center/cover;
-webkit-mask:radial-gradient(circle closest-side,#0000 calc(100% - 30px),#fff calc(100% - 32px));
mask:radial-gradient(circle closest-side,#0000 calc(100% - 30px),#fff calc(100% - 32px));
}
<div class="box"></div>
<div class="box" style="width:300px;height:300px"></div>
您可以像这样使用在 svg 中绘制的路径:
img{-webkit-clip-path: url(#clip);;
clip-path: url(#clip);}
<img src="https://assets.codepen.io/222579/darwin300.jpg" />
<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M0,0 L1,0 1,1 0,1 0,0M.75,.5A.25,.25 0 1 0 .25,.5A.25,.25 0 1 0 .75,.5z" />
</clipPath>
</defs>
</svg>
请注意 clipPathUnits="objectBoundingBox"
并且路径的值介于 0 和 1 之间。此外,路径的第一部分是顺时针绘制的,而第二条路径(孔)是逆时针绘制的。
它是一个形状里面有一个矩形。
-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
如何在里面夹一个圆圈?
改用mask
:
.box {
display: inline-block;
width: 200px;
height: 200px;
background: url(https://picsum.photos/id/100/800/800) center/cover;
-webkit-mask: radial-gradient(circle 40px, #0000 98%, #fff);
mask: radial-gradient(circle 40px, #0000 98%, #fff);
}
<div class="box"></div>
<div class="box" style="width:300px;height:300px"></div>
您可以让它响应如下:
.box {
display:inline-block;
width:200px;
height:200px;
background:url(https://picsum.photos/id/100/800/800) center/cover;
-webkit-mask:radial-gradient(circle closest-side,#0000 calc(100% - 30px),#fff calc(100% - 32px));
mask:radial-gradient(circle closest-side,#0000 calc(100% - 30px),#fff calc(100% - 32px));
}
<div class="box"></div>
<div class="box" style="width:300px;height:300px"></div>
您可以像这样使用在 svg 中绘制的路径:
img{-webkit-clip-path: url(#clip);;
clip-path: url(#clip);}
<img src="https://assets.codepen.io/222579/darwin300.jpg" />
<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M0,0 L1,0 1,1 0,1 0,0M.75,.5A.25,.25 0 1 0 .25,.5A.25,.25 0 1 0 .75,.5z" />
</clipPath>
</defs>
</svg>
请注意 clipPathUnits="objectBoundingBox"
并且路径的值介于 0 和 1 之间。此外,路径的第一部分是顺时针绘制的,而第二条路径(孔)是逆时针绘制的。