JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>
<div class="sample">
	<div class="top">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="bottom">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</div>

CSS

html {
	background: #ffc;
}
body {
	margin: 0;
}
.header {
	height: 200px;
	background: #cf9;
}
.sample {
	position: relative;
	height: 300px;
	background: url(http://widefon.com/_ld/66/87233500.jpg) no-repeat 50% -400px;
}
.top,
.bottom {
	overflow: hidden;
	position: absolute;
	right: 0;
	left: 0;
	height: 100px;
}
.top {
	bottom: 100%;
}
.bottom {
	bottom: 0;
}
.top .left:before,
.top .right:before,
.bottom .left:before,
.bottom .right:before {
	content: "";
	position: absolute;
}
.top .left,
.top .right,
.bottom .left,
.bottom .right {
	overflow: hidden;
	position: absolute;
}
.top .left,
.top .right,
.bottom .left:before,
.bottom .right:before {
	height: 70px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .7);
}
.bottom .left,
.bottom .right {
	top: 0;
}
.top .left,
.bottom .left {
	left: 0;
	right: 50%;
}
.top .right,
.bottom .right {
	left: 50%;
	right: 0;
}
.top .left,
.top .right,
.bottom .left,
.bottom .right,
.top .left:before,
.top .right:before,
.bottom .left:before,
.bottom .right:before {
	bottom: 0;
	transform-origin: 0 100%;
}
.top .left,
.top .right:before,
.bottom .left:before {
	transform: skewX(45deg);
}
.top .right,
.top .left:before,
.bottom .right:before {
	transform: skewX(-45deg);
}
.top .left:before,
.top .right:before {
	top: 0;
	background: url(http://widefon.com/_ld/66/87233500.jpg) no-repeat 50% -330px;
}
.top .left:before {
	right: -100%;
	left: 0;
}
.top .right:before {
	right: 0;
	left: -100%;
}
.bottom .left:before,
.bottom .right:before {
	right: 0;
	left: 0;
	background: #ffc;
}