Can you help me with css shapes

[kpearson]

Hi guys,

I’m struggling to get my head around css shapes :( I would like to create two circle shapes which overlap a little but the overlapping circle indents into the circle behind it leaving a 3px gap. Please see image for better understanding.

Can anyone help me out please?


Thank you

Kev

[Kitty Giraudel]

Short answer: you can’t do this. There is no path-finder in CSS. You can make 2 half transparent circles overlapping each over, but you won’t make a transparent border around the top one.

[Paulie_D]

It’s not perfectly what you are after but you can work with divs with border-radius and a box shadow.

http://codepen.io/Paulie-D/pen/exGdr

[Kitty Giraudel]

You might want to look at this: – http://dabblet.com/gist/2668930
– http://dabblet.com/gist/2687089
– http://dabblet.com/gist/2690290

[kpearson]

Cheers lads for your help! That should be enough to get me going.

Thank you

[Author]

Posts