title: HTML5/CSS3 - Custom Shape Div with google maps inside
body: <p>I need to make a custom shape div holding a "google maps" map. The custom border it's fine, I can handle it using a png, but the shape itself, I have only some theories of how to do it, but nothing in practice. But I think there is a way to do it using html5 canvas to make the custom shape on the div and use in css a overflow:hidden to hide what goes out of the div.</p>
  
  <p>right now I have the following structure:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div class="Orange_Background"&gt;&lt;/div&gt;
      &lt;div class="FX_Lines_over_background"&gt;&lt;/div&gt;
      &lt;div class="GoogleMaps_Container"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So as you can se I can't use the background as a png to only show the map, and because I need the map to be clickable.</p>
  
  <p>Here is a image of what I was saying.</p>
  
  <p><img src="https://i.stack.imgur.com/SUxzL.jpg" alt="Teh Image"></p>
  
  <p>If anyone can help me, I'll be grateful !!</p>
  
  <p>Thank you all.</p>
  
  <p>PS: It can be with jquery too ! (if someone knows a plugin that do it.)</p>