我需要制作一个包含“谷歌地图” map 的自定义形状 div。自定义边框很好，我可以使用 png 来处理它，但形状本身，我只有一些关于如何做的理论，但没有实践。但我认为有一种方法可以使用 html5 canvas 在 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 来仅显示 map ，因为我需要 map 可点击。
这是我刚才所说的图片。
如果有人能帮助我，我将不胜感激!!
谢谢大家
PS: jquery 也可以! (如果有人知道这样做的插件。)
最佳答案
回复:Zee Tee 的 回答:如果你确实走这条路，你可以为包含图像的 div 设置 pointer-events: none(在你的 css 中)。这会将所有鼠标事件发送到它下面的层。抱歉，我还没有权限对答案发表评论 :D
如果您不关心 IE(6-8) 支持，那么您可以使用 CSS 3D 转换直接在 map 层上执行此操作。但是 map 看起来会歪斜，如果那是你想要的效果，如果不是以前的答案仍然是最好的方法
另一种解决方案是使用 mask 图像。抱歉浏览器支持很烂，但是如果在他们 catch 之前你有一个很好的后备，你应该没问题
关于javascript - HTML5/CSS3 - 内部带有谷歌地图的自定义形状 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11334995/