如何为 Google 地图嵌入创建六角形 iFrame？

Question

我正在寻找一种创建六角形 iFrame 的方法，以便从 Google 中获取地图。 像这样： http://i.stack.imgur.com/r6CbK.png

我想我需要一种方法来在 iFrame 的边框上应用样式，但我找不到方法。 谢谢

Answer 1

我在这里做了一些东西。我认为它适合你（如果我很了解你的需求）;)

CSS3很厉害

事实上，您只需要执行 3 <div> 并旋转它们。然后，插入您的 Google <div> 和 overflow:hidden 3 <div> 个容器。

<div class="hexagon hexagon2">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <div id="map" style="width:200px;height:300px;margin-top:80px;"></div>
        </div>
    </div>
</div>

Complete code - JsFiddle

此致。