title: Create CSS arrow with unknown height
body: <p>I used <a href="http://css-tricks.com/snippets/css/css-triangle/" rel="nofollow">http://css-tricks.com/snippets/css/css-triangle/</a> to create arrows with css.</p>
  
  <pre><code>ul li div.arrow{
   position: absolute;
   width: 0;
   height: 0;
   top: 0;
   right: -30px;
   border-left: 15px solid red;
   border-top: 30px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 30px solid transparent;
  </code></pre>
  
  <p>It works when i know the height of the arrow. But now i want to create an arrow with an unknown height. I created a <a href="http://jsfiddle.net/69vVj/1/" rel="nofollow">fiddle</a> to show you what i want to do.</p>
  
  <p>As you can see the last item is higher and the arrow is not filling the complete height of the li</p>
  
  <p>Is there a way to make these arrows fill the complete height of the li without using Javascript?</p>