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

Question

我正在寻找一种方法来创建一个六边形iFrame，以便从Google里面获取一张地图。 就像这样： http://i.stack.imgur.com/r6CbK.png

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

Answer 1

我在这里做了些什么。我认为它适用于你（如果我理解你的需求）;）

CSS3是非常强大的。

其实你只需要做3 <div>并旋转它们。然后，插入您的Google <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

最好的问候。