How to subtract a shape from a div?

user_3607282 0
Viewed 3448

I have two divs that are overlapping each other like in the first image below. What I want to do is, I want to create a gap between the two circles like in the second image.

enter image description here

Now I know this can be easily done with borders or shadows and such, but the problem is, this is a component that I will be reusing and the background it gets placed on can be different each time. Sometimes even see through with content behind.

Is there a way to cut off a piece from a div like that? Without using borders/shadows.

css html
2 Answers

How bout this solution. I know you don't want to use shadows, but I reason that was because of the transparency issue you described.

In my example below I do use a shadow, but it does not cause any problems with the background.

In short I am creating a blank circle that can function as a mask. Inside it I place a transparent circle (the cutout) with a box-shadow to fill the rest of the mask.

The complete code with the 2 circles could look like this: https://jsfiddle.net/jkrielaars/hzv06tsf/

The cutout bit you asked for is shown below:

div{
    position:relative;
    width:200px; 
    height:200px;
    border-radius: 50%;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    top:100px;
    left:100px; 
    border-radius:50%;
    width:100px; 
    height:100px;
    box-shadow: 0px 0px 0px 2000px red;
}

body{background: url('https://picsum.photos/200/300?image=1043');background-size:cover;}
<div></div>

user_15779260

Here is another solution with one element and without pseudo element:

div {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:radial-gradient(circle at 80% 70%,transparent 29%,red 30%);
  margin: 0 auto;
}

body {
  background: url('https://picsum.photos/800/600?image=1069');
}
<div></div>

user_86203330
Related