Unique clipping mask inward of a div

I’m trying to determine how to add a unique kind of clipping mask that doesn’t appear to be in clippy. I’ve created a basic demo below which kind of resembles what I’m trying to achieve:

#test {
  width: 300px;
  height: 300px;
  background: pink;
  position: relative;
}

#circle {
  border-radius: 50%;
  background: white;
  width: 100px;
  height: 300px;
  position: absolute;
  left: 85%;
  top: 0;
}

<div id='test'>
<div id='circle'>

</div>
</div>

Essentially I’m trying to get a mask on the left of a div, so in this demo I’ve just created a circle and placed it over it to demonstrate what I’m trying to achieve.

Does anyone have any actual workaround for this? Thanks for the help

JS Fiddle: https://jsfiddle.net/mo823e4c/