Как сверстать такой прямоугольник с прозрачным кругом?

Question

Прямоугольник с прозрачным кругом

Answer 1

SVG решение

Попробуйте вариант решения с помощью SVG mask. В качестве маски используется круг и при fill="black" в прямоугольнике будет вырезана окружность сквозь которую будет виден серый фон.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="500" height="250" viewBox="0 0 500 250" style="border:1px solid gray;" >   
    <defs>
     <mask id="msk"> 
       <rect fill="white" width="100%" height="100%"  />  
      <circle fill="black" cx="250" cy="125" r="50" />
     </mask>
    </defs> 
         <!-- Серый фон    -->
    <rect width="100%" height="100%" fill="#C0C0C0" />  
        <!-- В белом прямоугольнике маской вырезается окружность -->
     <rect mask="url(#msk)" x="40" y="50" width="300" height="150" fill="white" /> 
</svg>

CSS решение

-webkit-mask-image

body {
  background: silver;
}
div {
  width: 400px;
  height: 200px;
  background: white;
    
  -webkit-mask-image: radial-gradient(
    circle at 70% center,
    transparent 60px,
    black 61px );
}

<div></div>

Answer 2

body {
  background-color: green;
}

.rectangle {
  height: 150px;
  width: 400px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.circle {
  background-color: transparent;
  border: 400px solid red;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="rectangle">
  <div class="circle"></div>
</div>

https://jsfiddle.net/pdvcugL0

БЛОГ НА HUSL

Как сверстать такой прямоугольник с прозрачным кругом?

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

SVG решение

CSS решение