css - 如何在形状内剪辑一个圆圈

Question

它是一个形状里面的一个矩形。

-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%);

我怎样才能在里面剪一个圆圈？

Answer 1

使用 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>