Html 如何在谷歌地图div上有一个倾斜的一面

我试图在一个装有谷歌地图的div上有一个倾斜的一面。像这样：

为此，我使用了使用CSS的倾斜转换。但是，它使div的两侧倾斜。因此，地图如下所示：

我的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);
}

我的HTML：

<div id='ez-map'></div>

---

代码笔是

我会使用覆盖来隐藏一些地图并创建这种效果，因为我认为这里不适合使用倾斜：

.map{
显示：内联块；
填充：50px0；
背景：黄色；
位置：相对位置；
}
.地图：以前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
左：0；
宽度：120px；
背景：
线性梯度（左上角，透明50%，黄色51%）；
}

#ez map{-webkit剪辑路径：多边形（15%0%，100%0%，85%100%，0%100%）；剪辑路径：多边形（15%0%，100%0%，85%100%，0%100%）；}

+删除倾斜。