如何为Google Maps容器div实现单侧倾斜效果

你遇到的核心问题是：直接对地图容器应用skew变换时，变换会作用于容器内的所有内容，包括Google Maps的瓦片和控件，导致地图整体变形错位。要实现单侧倾斜的视觉效果，同时保持地图正常显示，我们需要把倾斜效果和地图内容分离处理，下面给你两种可行的方案：

方案一：使用Clip-path裁剪实现单侧倾斜 #

这种方法通过裁剪容器的形状来模拟单侧倾斜，同时调整地图的位置和变换来适配裁剪区域，保证地图内容显示正常。

修改后的HTML代码 #

<div class="map-wrapper">
  <div id='ez-map'></div>
</div>

对应的CSS代码 #

.map-wrapper {
  min-height: 150px;
  min-width: 150px;
  height: 420px;
  width: 100%;
  /* 裁剪出左侧倾斜的形状：左上角向右偏移30px，形成斜线侧边 */
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
  position: relative;
}

#ez-map {
  width: calc(100% + 30px); /* 让地图覆盖裁剪多出的区域 */
  height: 100%;
  /* 反向倾斜抵消，保证地图内容正常 */
  transform: skew(30deg, 0deg);
  transform-origin: top left;
  position: absolute;
  left: -30px; /* 向左偏移，填充裁剪的侧边区域 */
}

方案二：使用伪元素创建单侧倾斜遮罩 #

如果不需要地图填充倾斜区域，只是希望容器有单侧倾斜的视觉边框/背景，可以用伪元素实现，地图保持完全正常的状态。

修改后的HTML代码 #

<div class="map-container">
  <div id='ez-map'></div>
</div>

对应的CSS代码 #

.map-container {
  min-height: 150px;
  min-width: 150px;
  height: 420px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 伪元素创建左侧倾斜的背景/边框 */
.map-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background-color: #f0f0f0; /* 可以设置和地图背景一致的颜色 */
  transform: skew(-30deg, 0deg);
  transform-origin: top right;
  z-index: 1; /* 放在地图上方，形成倾斜侧边 */
}

#ez-map {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}

原理说明 #

• 方案一通过clip-path定义容器的单侧倾斜形状，然后让地图反向倾斜并偏移，填充裁剪区域，最终用户看到的地图内容是完全正常的，只是容器呈现单侧倾斜的外观。
• 方案二利用伪元素单独创建倾斜的侧边，地图本身不做任何变换，保持原始状态，适合只需要视觉上的倾斜边框/装饰的场景。

内容的提问来源于stack exchange，提问作者pkjboy