CSS прозрачный эффект границы на перекрывающихся элементах

Question

Я изо всех сил пытаюсь найти решение о достижении этого конкретного эффекта:

Сложность в том, что мне нужно, чтобы круг и прямоугольник были двумя отдельными элементами, потому что они будут содержать дочерние узлы.

Я пробовал разные способы, включая border s с прозрачными цветами, shape- свойства, хитрость позиционирования элемента и т. Д. К сожалению, ни одно из моих испытаний не дало хотя бы приблизительных результатов. Кажется, я просто не могу обернуть голову вокруг этого, и я не могу найти ни одного примера в Интернете. Самым близким, что я получил, была эта тема .

Любая помощь будет высоко ценится. Спасибо!

Answer 1

Используя radial-gradient, вы можете легко сделать это:

.rect {
 margin-top:50px;
 height:120px;
 background:radial-gradient(circle at center,transparent 100px, green 100.5px);
}
.circle {
  margin:-150px auto 0;
  width:180px;
  height:180px;
  background:green;
  border-radius:50%;
}

html {
 background:linear-gradient(to right,pink,white);
 height:100%
}

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