title: Styling DIV Arrow Outlines - Making hollow triangles
body: <p>thank you for all the years that I've never had to post a question and simply just searched!</p>
  
  <p>Now, I'm trying to draw an arrow with a DIV. Example: <a href="http://i.imgur.com/wZBgv.png" rel="nofollow">http://i.imgur.com/wZBgv.png</a></p>
  
  <p>So far code such as that below will draw a triangle: <a href="http://i.imgur.com/9nr3b.png" rel="nofollow">http://i.imgur.com/9nr3b.png</a> </p>
  
  <pre><code>.arrow-small {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; 
  height: 0;
  border-style: solid;
  border-width: 80px 600px 50px 600px; 
  border-color: transparent transparent blue transparent;
  }
  </code></pre>
  
  <p>One method I've tried has been to create a smaller filled triangle to place on top of the large one which would create the arrow outline that I'm looking for, however I can not find a way to make the top div show the page background to complete the effect.</p>
  
  <p>For clarity, my questions: </p>
  
  <p>1) How does one create a backgroundless arrow with a div?</p>
  
  <p>2) Or, how does one show the body background in a div ontop of another div that is not transparent? </p>