how to make transparent circle gap?
Hi guys, I need to make this transparent gap under the circle, how can I do it? I thought about clip path, but in my opinion it would be the problematic, and I want to find easier way, thanks in advance!
![](https://utfs.io/f/846faae6-47b2-41aa-8e5a-17c9194a1f06-6p8g0l.jpg)
7 Replies
You can use
background: transparent
, but then you'd have to use two elements to achieve this effect. I think clip path is exactly what you are looking for.
You can probably just use a pseudo element I think, instead of having two elements like I said, so maybe background: transparent
will also work.Clip path is gonna need a little bit of work i believe.. maybe do an SVG? Make a simple rectangle SVG with a half-circle cut from above.
And use this SVG as a background img for the big white-background element under the close button.
And translateY your close button.
Unless the background behind these two elements is one color and not an image. Is it one color?
![](https://utfs.io/f/fbaf2f57-65a2-4618-81d3-75cb88e0ac04-6onya9.jpg)
This background inside the red border
radial-gradient on the lower element might work to
Love it, simple and does the job 👌
@therealmarsman background is a big image of cabinet and there are a lot of dots on it with tooltips of different cabinet features
@capt_uhu I will try it!
Radial gradient just works perfectly, thank you!