title: How can I create an arrow using only CSS?
body: <p>I have seen the following example:</p>
  
  <pre><code>.arrow {
     height: 0;
     width: 0;
     border: 4px solid transparent;
  }
  .arrow.up {
     border-bottom-color: #000;
  }
  .arrow.down {
     border-top-color: #000;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FrsGR/" rel="noreferrer">http://jsfiddle.net/FrsGR/</a></p>
  
  <p>However I cannot understand how it creates arrows. Can someone explain this for me?</p>