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

【问题标题】：How to have a slanted side on a Google maps div如何在谷歌地图 div 上有一个倾斜的一面
【发布时间】：2018-10-01 03:57:47
【问题描述】：

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

密码笔是https://codepen.io/anon/pen/yjNbve

【问题讨论】：

#ez-map { -webkit-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); } + 去除偏斜。

标签： html css

【解决方案1】：

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

.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>

【讨论】：