title: Make only visible part of link clickable
body: <p>I'm trying to make something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/FPxoy.png" width="100" height="100"></p>
  
  <p>Where both sides of the button are clickable and link to a different website (have a guess which ones, heh).</p>
  
  <p><a href="https://jsfiddle.net/3HG6d/1836/" rel="nofollow noreferrer">https://jsfiddle.net/3HG6d/1836/</a></p>
  
  <p>The issue I'm having (as can be seen in the jsfiddle) is that the top <code>&lt;a&gt;</code> tag always overlaps the second one, making only one clickable.</p>
  
  <p>CSS:</p>
  
  <pre><code>a {
      float:left;
      margin:0.5%;
      position:absolute;
      display:inline-block;
  }
  
  /*Up-right pointing*/
  .triangle-up-right {
      width: 0;
      height: 0;
      padding-left:10%;
      padding-top: 10%;
      overflow: hidden;
  }
  .triangle-up-right:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left:-500px;
      margin-top:-500px;
  
      border-left: 500px solid transparent;
      border-top: 500px solid #4679BD;
  }
  
  /*Down-left pointing*/
  .triangle-down-left {
      width: 10%;
      height: 0;
      padding-bottom: 10%;
      overflow: hidden;
  }
  .triangle-down-left:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-right: 500px solid transparent;
      border-bottom: 500px solid #4679BD;
  }
  </code></pre>
  
  <p><strong>EDIT: should show the correct jsfiddle now</strong></p>