HTML
<div class="image-blocks">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 351 525.7" style="enable-background:new 0 0 351 525.7;" xml:space="preserve">
<defs>
<mask id="img-mask">
<polygon class="st0" points="0,177 0,525.7 351,348.7 351,0 " style="fill:#FFFFFF"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.unsplash.com/photo-1500908662484-3675d646715d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" mask="url(#img-mask)"></image>
</svg>
<div class="bottom-image">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 351 525.7" style="enable-background:new 0 0 351 525.7;" xml:space="preserve">
<defs>
<mask id="img-mask-2">
<polygon class="st0" points="0,177 0,525.7 351,348.7 351,0 " style="fill:#FFFFFF"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.unsplash.com/photo-1445699269025-bcc2c8f3faee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" mask="url(#img-mask-2)"></image>
</svg>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
background-color: #000;
}
.image-blocks{
display: block;
position: relative;
width: 100%;
max-width: 600px;
float: right;
}
svg{
width: 100%;
max-width: 600px;
height: auto;
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
.bottom-image{
display: block;
position: relative;
margin-top: -35%;
}
