Вырезка из слоя на CSS

* { 
  padding: 0; 
  margin: 0; 
} 
body { 
  background-image: url(http://beerhold.it/400/300); 
  background-size: cover; 
  width: 100vw; 
  height: 100vh; 
} 
div { 
  width: 50vw; 
  height: 100vh; 
  position: relative; 
}

<div> 
  <svg width="100%" height="100%" viewbox="0 0 100 100"> 
    <path d="M0 0 L0 100 L100 100 L100 0 Z M100,60 C 86.33,60 86.33,40 100,40 Z" style="fill-rule: nonzero; fill: rgba(255,255,255,.8);" /> 
  </svg> 
</div>

* { 
  padding: 0; 
  margin: 0; 
} 
body { 
  background-image: url(http://beerhold.it/400/306); 
  background-size: cover; 
} 
.block { 
  width: 50vw; 
  height: 100vh; 
  position: relative; 
  background-color: rgba(0,0,0,.5); 
} 
.key { 
  position: absolute; 
  right: 0; 
  top: 50%; 
  transform: translate(50%, -50%); 
  width: 4em; 
  height: 4em; 
  box-sizing: border-box; 
  border: .5em solid black; 
  background-color: white; 
  border-radius: 4em; 
}

<div class="block"> 
  <div class="key"> 
  </div> 
</div>

.wrapper { 
  width: 960px; 
  height: 720px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto; 
  background-image: url(http://beerhold.it/960/722); 
  background-repeat: no-repeat; 
  backgorund-position: center center; 
  position: relative; 
} 
.key { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  width: 10em; 
  height: 10em; 
  border: 2em solid rgba(255, 255, 255, .5); 
  background-image: url(http://beerhold.it/960/722); 
  background-size: 960px 720px; 
  background-position: center center; 
  border-radius: 10em; 
} 
.block1, 
.block2 { 
  position: absolute; 
  top: 0; 
  width: 480px; 
  height: 720px; 
} 
.block1 { 
  left: 0; 
  background-color: rgba(255, 255, 0, .4); 
} 
.block2 { 
  right: 0; 
  background-color: rgba(0, 0, 255, .4); 
}

<div class="wrapper"> 
  <div class="block1"></div> 
  <div class="block2"></div> 
  <div class="key"></div> 
</div>