我需要制作一个包含“谷歌地图”地图的自定义形状 div。自定义边框很好，我可以使用 png 来处理它，但形状本身，我只有一些关于如何做到这一点的理论，但实际上没有。但我认为有一种方法可以使用 html5 画布在 div 上制作自定义形状并在 css 中使用 overflow:hidden 来隐藏 div 中的内容。
现在我有以下结构：
<html>
<body>
<div class="Orange_Background"></div>
<div class="FX_Lines_over_background"></div>
<div class="GoogleMaps_Container"></div>
</body>
</html>
所以你可以看到我不能使用背景作为 png 来只显示地图，因为我需要地图是可点击的。
这是我所说的图像。
如果有人可以帮助我，我将不胜感激！！
谢谢你们。
PS：也可以用jquery！（如果有人知道这样做的插件。）
您需要创建一个具有 4 个不同图层（上/右/左/下）的框架，并使用比地图本身更高的透明 PNG 图像应用 z-index、背景图像。位置需要在这些层上是绝对的或固定的。
正如您在下面看到的，这 4 个图像是黑色突出显示的区域，它们需要单独切片，然后您可以将它们放置在地图图层上。这使中间区域保持开放，没有任何重叠层，因此地图仍然可以使用：
您可以将整个橙色背景保留在地图图层后面，这无关紧要，因为您将首先将其与地图重叠，然后再与 4 帧图层重叠，如果正确切片和定位，它们只会与背景图像重叠。整个背景图像显然是完整的图像，上面没有任何地图，但都是橙色的，带有条纹和渐变。如果您问我，这是一项相当艰巨的任务，费时，但有可能。
注意：透明区域只是您在黑色高光中看到的空白区域，其余部分显然是您的图像。
RE：Zee Tee 的回答：如果你确实走这条路，你可以为包含图像的 div 设置 pointer-events: none （在你的 css 中）。这会将所有鼠标事件发送到它下面的图层。抱歉，我还没有权限评论答案：D
如果您不关心 IE(6-8) 支持，那么您可以使用 CSS 3D 变换直接在地图图层上执行此操作。但是地图看起来会倾斜，如果这是您想要的效果，如果不是以前的答案仍然是最好的方法
另一种解决方案是使用掩码图像。抱歉，浏览器支持很糟糕，但如果你有一个很好的后备，直到他们赶上，你应该没问题