Как вырезать круг внутри фигуры?

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

как я могу вырезать круг внутри?

_{Свободный перевод вопроса how to clip a circle inside a shape от участника @Lin Weiye.}

Answer 1

Вместо clip-path используйте маску:

.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,transparent 98%,#fff 100%);
          mask:radial-gradient(circle 40px,transparent 98%,#fff 100%);
}

<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 farthest-side,transparent calc(100% - 30px),#fff calc(100% - 32px));
          mask:radial-gradient(circle farthest-side,transparent calc(100% - 30px),#fff calc(100% - 32px));
}

<div class="box"></div>

<div class="box" style="width:300px;height:300px"></div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Вы можете использовать path, который вы рисуете в 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" и значения path находятся в интервале между 0 и 1. Также первая часть path рисуется по часовой стрелке, а вторая часть (отверстие) рисуется против часовой стрелки.

_{Свободный перевод ответа от участника @enxaneta.}

БЛОГ НА HUSL

Как вырезать круг внутри фигуры?

Ответы (2 шт):