yandex map under complex mask

by Alexander Zonov

HTML

<div class="holder">
  <div class="map_holder">
    <div class="map">
       <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=bZI7pZW-z5MXilCZAF2kssP0C14tbFPU&width=100%&height=720&lang=ru_RU&sourceType=constructor"></script>
    </div>
    <div class="top mask"></div>
    <div id="parallelogram"></div>
    <div class="bottom mask"></div>
  </div>
</div>

CSS

.holder {
  padding: 50px;
  position: relative;
  width: 600px;
	height: 680px;
}

.map_holder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

.mask {
  position: absolute;
  -webkit-transform: skew(0deg, -25deg);
	   -moz-transform: skew(0deg, -25deg);
	     -o-transform: skew(0deg, -25deg);
	background: white;
  box-sizing: border-box;
  width: 100%;
}

.top.mask {
  top: -20%;
  left: 0;
  height: 40%;
}

.bottom.mask {
  top: 70%;
  left: 0;
  height: 50%;
}

#parallelogram {
  position: absolute;
  pointer-events: none;
  top: 20%; left: 0;
  height: 50%;
  width: 100%;
	-webkit-transform: skew(0deg, -25deg);
	   -moz-transform: skew(0deg, -25deg);
	     -o-transform: skew(0deg, -25deg);
	background: transparent;
  border: 3px solid red;
  box-sizing: border-box;
}