title: How can I make 2 divs with a slash between
body: <p>I want make a menu like the image but I don't know how to cut the two divs and make it clickable.</p>
  
  <p>I have tried with svg and borders on divs but I can't get the divs nor svg together because the "outline" still a rectangle!</p>
  
  <p>the image example its on this link:<br>
  <a href="http://postimg.org/image/ffp6g83fd/537cb837/" rel="nofollow noreferrer">http://postimg.org/image/ffp6g83fd/537cb837/</a></p>
  
  <pre><code>I only can make this :
  ********|   *****
  ******* |  ******
  ******  | *******
  *****   |********
  
  and I want :
  
  ******** *****
  ******* ******
  ****** *******
  ***** ********
  </code></pre>
  
  <p>and make them clickable</p>
  
  <p>this was my result based on <a href="https://stackoverflow.com/users/875313/hugo-marabutt-nogueira">Hugo Marabutt Nogueira</a> answer</p>
  
  <p><a href="http://jsfiddle.net/L7PL4/" rel="nofollow noreferrer">http://jsfiddle.net/L7PL4/</a></p>