title: Irregular DIV shape, cross browser platform support
body: <p>I'm trying to make a irregular shaped DIV, but the only method that I found out to accomplish this is by using the polygon() function. Unfortunately, <a href="http://caniuse.com/#feat=css-shapes" rel="nofollow noreferrer">IE and FF don't support it</a>. I don't need all versions to be supported, but at least the latest, of IE, FF and Chrome.</p>
  
  <p>What I'm trying to accomplish is basically this - with a black border between the white and the red:</p>
  
  <p><img src="https://i.stack.imgur.com/T67OX.png" alt="Example"></p>
  
  <p>The white part would be the navigation menu (home, contact, about, etc) and the red portion would be the content, however, I need ALL the red part to be clickable (meaning: I can put a link anywhere and the user can click with ease...)</p>
  
  <p>The end result should look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/t83Q7.png" alt="Mockup"></p>
  
  <p>Also, the white div needs to maintain the angle independent of the size of the viewport, because the site will be responsive.</p>
  
  <p>How could I achieve this?</p>