JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sprite-container">
		<!--?xml version="1.0" encoding="utf-8"?-->
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<symbol viewBox="0 0 2000 400" id="icon-bg">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M2000 400V155L1000 390 0 155v400z"></path>						
				</symbol>
		</svg>
</div>

<div class="photo">
  <svg class="corner" viewBox="0 0 2000 400">
			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bg"></use>
	</svg>
</div>

CSS

.photo {
  background-image: url(http://bm.img.com.ua/nxs/img/prikol/images/large/3/9/315193.jpg);
  background-size: cover;
  width: 400px;
  min-height: 300px;
  position: relative;
}

.sprite-container {
  display: none;
}

.corner {
    fill: #edf2f6;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    position: absolute;
}