JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://shining-show.com/demo/css/reset.css">
<link rel="stylesheet" href="http://shining-show.com/demo/grid.css">
		<header>
			<div class="headerLine"></div>
			<div class="fullrow" style="height: 100vh;background-color: rgba(255, 255,255,.8);">
				

			</div>
			
		</header>


		<div style="height: 8000px;"></div>

CSS

.row > .fullrow {
				max-width: 100%;
			}
			header .fullrow {
				left: 0;
				top: 0;
				background-image: url('http://i.imgur.com/qKHxIrf.jpg');
				-webkit-background-size: cover;
				-moz-background-size: cover;
				background-size: cover;
				-o-background-size: cover;
				z-index: 1;
				clear: both;
			}
			header .fullrow:after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 100%;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				border-bottom: 300px solid white;
				border-left: 3000px solid transparent;
				box-shadow: 10px 10px 5px #888888;
			}
			.headerLine {
				content: "";
				position: absolute;
				bottom: 0;
				right: 50%;
				width: 100%;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				border-bottom: 300px solid white;
				border-right: 3000px solid transparent;
			}