对角线HTML地图无法正常工作

Question

我需要你的帮助。 我想在我的网页上实施Google地图地图。 但不仅仅是法线贴图，我希望它是对角线（在图片中有更好的描述）。

为了做到这一点，我想我只是创建一个div，用css拧它，将地图放在里面并拧紧这个也是负面的。 结果：div就像我想要的那样但是地图css使得div看起来是正常的。 像地图一样，css会覆盖div属性。 我该如何单独购买？ 这很难描述，但我希望你理解我的意思。 代码如下：

HTML：

<div id="diagonal">
  <div id="map"></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

CSS：

#diagonal {
  left: 0px;
  right: 0px;
  transform: skewY(-6deg);
  height: 40vh;
}

#map {
  top: 5em;
  left: 0px;
  right: 0px;
  height: 50vh;
  transform: skewY(0deg);
}

JS：

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.roadmap
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

感谢您的帮助。

我多么想要它的形象

Answer 1

我举了一个使用svg三角形覆盖地图顶部和底部的例子。您可能希望稍微使用维度来获得您想要的内容。在此处查看https://codepen.io/DriftDesign/pen/ERPLNj

以下是应用效果的svg和css代码。

// html/svg
        <div class="svg-top-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="0" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
             <path d="M0 0 L100 0 L100 2 L0 100 Z" stroke-width="0"></path>
           </svg>
         </div>

// css
    .svg-bottom-container {
        fill: #fcfcfc;
    }
    .svg-bottom-container {
        margin-top: -100px;
        margin-bottom: 0px;
        height: 100px;
        width: 100%;
        position: absolute;
        z-index: 4;
    }
    svg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }