Cutting out a semi-circle out of a Section Background and showing a background behind it

I've been trying to find the best way to do this aside from using pngs with transparency.

The designer for a site I'm building cut these circles out of every section on the site as part of the overall theme. I love the look of it, but implementing it in a way that would happen automatically is not obvious.

I tried some SVG masking, but it would not show the background behind it. The images ideally could be replaced by a site editor without having to cut this part out of each image. Is there a css, javascript, or canvas way to to what I have in mind?

Also, there are background images in each section. Not just solid colors and gradients.

Click Here to View Example Image

The CSS is straight forward positioning of three <div>s inside a wrapper element (in this case a <section>

The two outer <div>s are the bars, while the inner div creates the illusion of the half-circle. This is done simply by providing a border radius of twice its width.

Once the "circle" is centered and the z-index set, you have your solution.

I've leave putting the arrow into the circle up to you.

section {
  z-index: 50;
  position: relative;
  width: 100vw;
  height: 250px;
}

div {
  z-index: 25;
  position: absolute;
  height: 50%;
  width: 100%;
}
div:nth-child(1) {
 background-image: url(https://via.placeholder.com/160?text=TOP);
 }

div:nth-child(2) {
 background-image: url(https://via.placeholder.com/160/0000FF?text=CENTER);
 background-position: center;
  z-index: 999;
  top: 75px;
  left: calc((100vw/2) - 50px);
  width: 100px;
  height: 100px;
  border-radius: 200px;
}

div:nth-child(3) {
 background-image: url(https://via.placeholder.com/160/FF0000/FFFFFF?text=BOTTOM);
  bottom: 0;
  border: 1px solid black;
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>