title: Responsive triangles with hover effect
body: <p>I recently came across an article detailing how to create <strong>responsive triangles</strong> with pure <em>CSS</em>. I was wanting to take this a step further to incorporate it into a current design. </p>
  
  <p>I was able to get four triangles placed within a square div perfectly (creating an origami-type effect) and they are responsive.</p>
  
  <p>However when I try to incorporate a hover effect, it does not change the color of the triangle - only the empty space around it.</p>
  
  <p>Also, when my square's width changes (keeping with the responsiveness) the bottom triangle separates from the others - because I used absolute positioning and bottom: 0; to place the triangles within the square.</p>
  
  <p>Does anyone know a way around this to achieve my desired effect in pure CSS? Here is the relevant code : <a href="http://jsfiddle.net/ze8dgyta/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="box"&gt;
          &lt;div class="triSectionTop"&gt;&lt;/div&gt;
          &lt;div class="triSectionRight"&gt;&lt;/div&gt;
          &lt;div class="triSectionBottom"&gt;&lt;/div&gt;
          &lt;div class="triSectionLeft"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>    .container {
      box-sizing: border-box;
      height: 400px;
      width: 400px;
  }
  .box {    
    position: relative;
    box-sizing: border-box;
    height: 400px;
    width: 100%;
  }
  .triSectionTop {
      position: absolute;
      top: 0;
      width: 100%;
      height: 0;
      padding-left: 50%;
      padding-top: 50%;
      overflow: hidden;
  
      &amp;:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          margin-left: -200px;
          margin-top: -200px;
          border-left: 200px solid transparent;
          border-right: 200px solid transparent;
          border-top: 200px solid #41a5e8;
      }
  }
  .triSectionRight {
      position: absolute;
      right: 0;
      width: 50%;
      height: 0;
      padding-top: 50%;
      padding-bottom: 50%;
      overflow: hidden;
  
      &amp;:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          margin-top: -200px;
  
          border-top: 200px solid transparent;
          border-bottom: 200px solid transparent;
          border-right: 200px solid #4eb2f5;
      }
  }
  .triSectionBottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 0;
      padding-left: 50%;
      padding-bottom: 50%;
      overflow: hidden;
  
      &amp;:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          margin-left: -200px;
  
          border-left: 200px solid transparent;
          border-right: 200px solid transparent;
          border-bottom: 200px solid #5abeff;
      }
  }
  .triSectionLeft {
      position: absolute;
      left: 0;
      width: 0;
      height: 0;
      padding-top: 50%;
      padding-bottom: 50%;
      padding-left: 50%;
      overflow: hidden;
  
      &amp;:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          margin-top: -200px;
          margin-left: -200px;
  
          border-top: 200px solid transparent;
          border-bottom: 200px solid transparent;
          border-left: 200px solid #67cbff;
      }
  }
  </code></pre>