title: CSS split a square into 4 triangles
body: <p>I am currently trying to make a square be 4 triangles of equal size that have hover events on them.</p>
  
  <p>I am creating the triangles like this, </p>
  
  <pre><code>.right, left, .top, .bottom {
      position: relative;
      width: 26px;
  }
  
  .right:before{
    position: absolute;
    display: inline-block;
    border-top: 26px solid transparent;
    border-right: 26px solid #eee;
    border-bottom: 26px solid transparent;
    left: 26px;
    top: 0px;
    content: '';
  }
  </code></pre>
  
  <p>What I am finding is that each triangle sits above one another meaning only one triangle can be hovered, here is my example, </p>
  
  <p><a href="http://codepen.io/anon/pen/qdmbKz" rel="nofollow">http://codepen.io/anon/pen/qdmbKz</a></p>
  
  <p>As you can see only the bottom triangle (hover at the bottom of the square) is hoverable. What am I doing wrong? Is there a better way of doing this?</p>