CSS Transparent border effect on overlapping elements

Question

I'm struggling to find a solution about achieving this particular effect:

The tricky part is that I need the circle and the rectangle to be 2 separate elements because they will contain child nodes.

I've tried various ways, including borders with transparent colors, shape- properties, element positioning trickery etc. Unfortunately, none of my trials yielded even at least approximate results. I just can't seem to be able to wrap my head around this and I can't find any examples on the web as well. The closest I got to was this thread.

Any help would be much appreciated. Thanks!

could do something like this https://stackoverflow.com/questions/10501488/css-3-shape-inverse-circle-or-cut-out-circle — Pete, Nov 08 '18 at 15:33
Wow, there are some really interesting ideas in that thread. Thanks a bunch! — Martin Shishkov, Nov 08 '18 at 15:38

score 4 · Accepted Answer · answered Nov 08 '18 at 15:42

Using radial-gradient you can easily do this:

.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>

CSS Transparent border effect on overlapping elements

1 Answers1