JSFiddle - React, Tailwind, and code Playground

HTML

<div class="neh">
  <div id="triangle-topleft"></div>
  <div id="triangle-topright"></div>
  <div id="triangle-bottomleft"></div>
  <div id="triangle-bottomright"></div>
</div>

CSS

.neh{
  position:relative;
  width:200px;
  height:300px;
  background:url("https://s-media-cache-ak0.pinimg.com/originals/50/ff/53/50ff53d3bfd4b0cd20da5b28986e5fa9.jpg") center center no-repeat;
  background-size:cover;
}

#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid #f3f5f6;
	border-right: 100px solid transparent;
  position:absolute;
  left:0px;
  top:0px;
}


#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid #f3f5f6;
	border-left: 100px solid transparent;
  position:absolute;
  right:0px;
  top:0px;
}

#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid #f3f5f6;
	border-right: 100px solid transparent;
  position:absolute;
  left:0px;
  bottom:0px;
}

#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid #f3f5f6;
	border-left: 100px solid transparent;
  position:absolute;
  right:0px;
  bottom:0px;
}