JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<script src="//maps.googleapis.com/maps/api/js?sensor=true&amp;language=ru"></script>
<div id="map"></div>
<div class="outer">
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS

#map,
.outer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}
#map {
	top: 0;
}
.outer {
	overflow: hidden;
	height: 100px;
}
.left,
.right {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	left: 50%;
}
.left {
	left: -50%;
}
.right {
	right: -50%;
}
.left,
.left:before {
	transform-origin: 100% 50px;
}
.right,
.right:before {
	transform-origin: 0 50px;
}
.right,
.left:before {
	transform: skewX(-45deg);
}
.left,
.right:before {
	transform: skewX(45deg);
}
.left:before,
.right:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(http://mazurowskij.com/wp-content/uploads/2015/02/tekstura-travi-teksturi-fon-travi-fona-travi-trava-tekstura-53595548019.jpg) repeat-x 50% 0;
}
.left:before {
	right: -100%;
}
.right:before {
	left: -100%;
}

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(60, 60)
});