Clip background color of parent div

Question

I'm trying to implement a complex-ish design and I am having difficulties with clipping and masking. I'm assuming a combination of clipping or masking is needed as I'm not sure how else to make this work. I need clip part of the background of a parent or adjacent div to be transparent. The main div has a small drop shadow so it's noticeable if a solid color is used instead. I've started on a crass prototype of just markup and CSS, but where I am now illustrates what I need to do quiet well.

I need to remove/clip the white background of the parent div and have it transparent because the real body/background is more than a solid color. I've looked at clip-path and other features but in reality I need to do the inverse of what I've read about them. Here's the markup and styling I have so far:

body {
    background-color: #C4C4C4;
}
.big-div {
    width: 300px;
    height: 100px;
    background-color: #fff;
    left: 100px;
    position: absolute;
    box-shadow: 5px 5px 5px #000; 
}
.number {
    border-radius: 20px;
    height: 50px;
    width: 50px;
    border: solid .5em #C4C4C4;
    padding: .5em;
    top: 10px;
    text-align: center;
    background: #008DCC content-box;
    left: -40px;
    position: absolute;
    clip: circle(100px, 200px, 300px, 400px);
}

and the simple bit of markup:

<div class="big-div">
    <div class="number">
        <p>2</p>
    </div>
</div>

In case I haven't illustrated my point as well as I would like, here's a snippet of the design in question pulled from Figma

Thanks in advance for any tips or advice

Answer 1

Here's a possible alternative method using a radial gradient as a background on the larger element.

Effectively we're using a radial background with a very small fade (1 pixel, just included for smoothing the edges) to place a transparent circle on your otherwise white background.

body {
  /* This gradient is not part of the solution, it just shows that the background is visible beneath the main element*/
  background: linear-gradient(to bottom, #C4C4C4, #B4B4B4 50%, #B4B4B4 50%, #C4C4C4);
}

.big-div {
  width: 300px;
  height: 100px;
  left: 100px;
  position: absolute;
  box-shadow: 5px 5px 5px #000;
  background-image: radial-gradient(circle at 0px 40px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30px, rgba(255, 255, 255, 1) 31px, rgba(255, 255, 255, 1) 100%);
}

.number {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  top: 15px;
  text-align: center;
  background: #008DCC content-box;
  left: -25px;
  position: absolute;
  line-height: 50px;
}

<div class="big-div">
  <div class="number">
    1
  </div>
</div>