I have come across a rather peculiar question, and I'd like to elaborate with a code snippet:
.container {
width: 200px;
height: 200px;
background: rgba(200, 200, 200, .87);
}
.pin {
position: absolute;
left: 50px;
top: 20px;
}
.overlay {
position: absolute;
left: 25px;
top: 40px;
background: grey;
border: 1px solid white;
padding: 12px;
padding-top: 30px;
}
.overlay:before {
content: '';
position: absolute;
border: 1px solid white;
width: 48px;
height: 48px;
border-radius: 50%;
top: -30px;
left: 10px;
}<div class="container">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay">
Content
</div>
</div>Upon inspection of the snippet provided, you'll notice a pin with some content placed in front of it.
My objective is to confine the pin within a white circle, ensuring that the content does not encroach on this circular boundary. Essentially, creating a punched-through effect where a portion of the content is removed by the circle.
One possible solution I pondered upon was using an SVG instead of a DIV for the content container (allowing the top part of the container to have half a circle less), but uncertainty looms over its suitability given dynamic content and varying widths.
Is there a CSS-only approach to achieving my desired outcome?
Your insights are greatly appreciated. Thank you!