Q:

How to have a slanted side on a Google maps div

I am trying to have a slanted side on a div that holds a google map. Like this: 
To do this I used the skew transformation using CSS. However, it skewed both sides of the div. So the map looks like this:

My CSS:
#ez-map {
  min-height: 150px;
  min-width: 150px;
  height: 420px;
  width: 100%;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
}

My HTML:
<div id='ez-map'></div>

The codepen is https://codepen.io/anon/pen/yjNbve 

A:

I would use an overlay to hide some of the map and create this effect as I don't think skew is suitable here:

.map {
 display:inline-block;
 padding:50px 0;
 background:yellow;
 position:relative;
}
.map:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:120px;
  background:
  linear-gradient(to top left,transparent 50%,yellow 51%);
}
<div class="map">
<img src="https://lorempixel.com/g/400/200/" >
</div>

