如何将一侧倾斜边缘的谷歌地图添加到html页面？

Question

基本上，我想将谷歌地图附加到我的联系页面的右侧，但是地图的左边缘应该倾斜30度而不是直线，请给出想法。

Answer 1

正如我在评论中提到的，您可以使用伪元素（:before）和CSS border来实现它。

我不知道它是否是30度，但您可以根据需要进行调整。

.map-container {
position: relative;
}
.map-container img {
    height: 400px;
    width: 600px;
    position: relative;
}

.map-container:before {
  border-right: 403px solid transparent;
    border-top: 403px solid #F4775C;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    z-index: 2;
}

<div class="map-container">
<img src="http://knowkalpesh.in/img/map/knowkalpesh-map.png" alt="My Address Map">
</div>