Clip element with circles, Erase portion of div, Hole Punch Effect

Question

I have this card layout Codepen card layout <div></div> in which I would like to create a "hole punch effect". Where the card is missing semi-circle bits from either side, and the blurred background shows through in the background.

I have tried using pseudo elements on the card element itself and making it inherit the background to give the illusion of negative space. As well as using clip-path, but that seems to do the inverse operation of what I want. I want to keep most of the card, and just erase a portion of it. Not sure what to call this or how to search for it, any and all suggestions are much appreciated!

Answer 1

it's a little late, but i'd like to share this solution with you:

.shape {
  width: 275px;
  height: 300px;
  position: relative;
  background-color: transparent;
}

.shape-left, .shape-right {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.circle {
    position: absolute;
    box-sizing: content-box;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 100vh solid white;
    top: 50%;
}

.shape-left {
  left: 0;
}

.shape-left .circle {
  left: 0;
  transform: translate(-50%, -50%);
}
  
.shape-right {
  right: 0;
}

.shape-right .circle {
  right: 0;
  transform: translate(50%, -50%);
}

body {
  background-image: url(https://images.pexels.com/photos/2318554/pexels-photo-2318554.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
  background-position: 50% 50%;
}

<div class="shape">
  <div class="shape-left"><div class="circle"></div></div>
  <div class="shape-right"><div class="circle"></div></div>
</div>

so basically what i did is the following:

1. create the rectangle without background
2. create a 'left' and a 'right' child element without background and hidden overflow both filling one half of your rectangle
3. give both children an element without background
4. style the element as a circle
5. align the circles inside the 'left' and 'right' element to the position you like the rectangle being 'clipped'
6. give the circles an oversized border (so it fills out the whole parent element) and a border color of your choice

tada ** if it is hard to understand, change the size of the border on the .circle element. this will help to understand.