如何在Google地图div上倾斜

Question

我试图在拥有谷歌地图的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>

codepen是https://codepen.io/anon/pen/yjNbve

Answer 1

我会使用叠加来隐藏一些地图并创建此效果，因为我不认为偏斜适用于此处：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<div class="map">
<img src="https://lorempixel.com/g/400/200/" >
</div>

＆＃13;

＆＃13;

＆＃13;