JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div id="links" class="zijden draai"><a href="#"></a></div>
	<div id="midden" class="draai"><a href="#"></a></div>
	<div id="rechts" class="zijden draai"><a href="#"></a></div>
</div>

CSS

html, body, div#wrapper{
	background-color:#1b1b1b;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

div.draai{
	display:inline;
	padding:0;
	
	overflow:hidden;
	position:absolute;
	
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    
	background-size: cover;
}

div#midden{
    width:25%;
    height:333px;
	top:0;
    bottom: 0;
    left: 0;
    right: 0;
	margin:auto;
	background-image:url('http://imandragrafie.nl/images/home_midden.png');
}

div.zijden{
    width:241px;
    height:241px;
    top: 0;
    bottom: 0;
	margin:auto;
	background-color:blue;
}

div#links{
	background-image:url('http://imandragrafie.nl/images/home_links.png');
	left: 0;
    right: 855px;
}

div#rechts{
	background-image:url('http://imandragrafie.nl/images/home_rechts.png');
	left: 0;
    right: -855px;

}

a{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	position:absolute;
	right:0;
}