CSS mask clipping and overlay SVG to achieve a two effect
I would suggest using an inline svg to create these shapes. This will provide more browser support than using the CSS mask property (canIuse). 

Both sides are created with paths and filled with the images using the pattern element :

DEMO





* {margin: 0;padding: 0;}
body {
  background: url('http://lorempixel.com/output/nature-q-g-800-600-5.jpg');
  background-size: cover;
}
svg {
  display: block;
  width: 95vw; height: 47.5vw;
  margin: 2.5vw;
}
&lt;svg viewbox="0 0 100 50"&gt;
  &lt;defs&gt;
    &lt;pattern id="img" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"&gt;
      &lt;image xlink:href="http://lorempixel.com/output/abstract-h-c-490-500-4.jpg" x="0" y="0" width="49.5" height="50" /&gt;
      &lt;image xlink:href="http://lorempixel.com/output/abstract-h-c-490-500-8.jpg" x="50.5" y="0" width="49.5" height="50" /&gt;
    &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;path d="M0 0 H49.5 V15 A10.02 10.02 0 0 0 49.5 35 V50 H0z" fill="url(#img)" fill-opacity="0.8" /&gt;
  &lt;path d="M50.5 0 H100 V50 H51 V35 A10.03 10.03 0 0 0 50.5 15z" fill="url(#img)" fill-opacity="0.8" /&gt;
&lt;/svg&gt;