JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
	<div class="hex">
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
</div>

CSS

*{
	margin: 0;
	padding: 0;
	border: none;
}

body{
	padding: 200px;
}

.hex{
	width: 180px;
	height: 102px;
	background: url('http://ob-a.com/img/2014/05/hd-nature-4398-wallpapers-1920x1080-4398.jpg') no-repeat;
	background-size: 180%;
	background-position: 0 50%;
	position: relative;
	zoom: 1;
}

.top, .bottom{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
    z-index: -1;
    overflow: hidden;
}

.top{
	-webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.bottom{
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.top:before, .bottom:before{
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	background: inherit;	
	top: 0;
	left: 0;	
}

body .top:before{
	-webkit-transform: rotate(-60deg) translate(0, -50%);
    -moz-transform: rotate(-60deg) translate(0, -50%);
    -ms-transform: rotate(-60deg) translate(0, -50%);
    -o-transform: rotate(-60deg) translate(0, -50%);
    transform: rotate(-60deg) translate(0, -50%);
	background-position: 0 0;	
}

body .hex .bottom:before{
	-webkit-transform: rotate(60deg) translate(0, 50%);
    -moz-transform: rotate(60deg) translate(0, 50%);
    -ms-transform: rotate(60deg) translate(0, 50%);
    -o-transform: rotate(60deg) translate(0, 50%);
    transform: rotate(60deg) translate(0, 50%);
	background-position: 0 100%;	
}