JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html {
	background: #ffc;
}
.header {
	height: 100px;
	background: #033;
}
.sample {
	overflow: hidden;
	position: relative;
	height: 400px;
	background: #fff;
}
.bottom .left,
.bottom .right {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	height: 100px;
	pointer-events: none;
}
.bottom .left {
	left: 0;
	right: 50%;
}
.bottom .right {
	left: 50%;
	right: 0;
}
.sample:before,
.sample:after,
.bottom .left:before,
.bottom .right:before {
	content: "";
	position: absolute;
}
.sample:before,
.sample:after,
.bottom .left:before,
.bottom .right:before {
	box-shadow: 0 0 30px rgba(0, 0, 0, .5);
}
.sample:before {
	z-index: 1;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 100px;
}
.sample:after {
	z-index: 2;
	top: 0;
	left: 50%;
	width: 100px;
	height: 100px;
	background: #033;
	transform: translate(-50%, -50%) rotate(-45deg);
}
.bottom .left:before,
.bottom .right:before {
	top: 30px;
	right: 0;
	bottom: 0;
	left: 0;
	background: #ffc;
	transform-origin: 0 100%;
	pointer-events: auto;
}
.bottom .left:before {
	transform: skewX(45deg);
}
.bottom .right:before {
	transform: skewX(-45deg);
}
.map {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
	var map = new google.maps.Map(document.querySelector('.map'), {
		zoom: 10,
		center: new google.maps.LatLng(60, 60)
	});
}, false);