如何爲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

最好的問候。