Как сверстать данные блоки, как вырезать один элемент из другого

Question

Мне нужно сверстать 3 блока, только при вёрстке круга нужно чтобы я видел фон не зелёный, а фон самого внешнего блока(красного).

Answer 1

Можно использовать 'box-shadow'

.block {
  background-color: red;
  display: inline-block;
  padding: 32px;
}

.hasCircle {
  width: 480px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.hasCircle:after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  margin: 100px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px #000;
}

<div class="block">
  <div class="hasCircle"></div>
</div>

БЛОГ НА HUSL

Как сверстать данные блоки, как вырезать один элемент из другого

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