title: Creating a Triangle marker in CSS
body: <p>I am working on a site that will have a main nav portion and a sub nav portion. When an item is selected, I want a triangle to appear below the selected list item. The triangle needs to look like it came from the area below it. In other words, something that looks like this: </p>
  
  <pre><code>+------------------------------------+
  | Parent 1     Parent 2     Parent 3 |
  +-----------------^------------------+
  | Child 1     Child 2     Child 3    |
  +---------------------------^--------+
  | Information goes here              |
  +------------------------------------+
  </code></pre>
  
  <p>I have created a JSFiddle. That Fiddle can be found <a href="http://jsfiddle.net/3wAKJ/" rel="nofollow">here</a>. From the fiddle, you can see that I have several problems. First, I can't seem to create a triangle. I currently have something that looks more like tabs. Those were created via some CSS that looks like this:</p>
  
  <pre><code>.mainSelected {    
      border-left: 6px solid transparent; 
      border-right: 6px solid transparent; 
      border-bottom: 10px solid #95A9C2; 
      text-align:center;
  }
  </code></pre>
  
  <p>The other issue is that I can't figure out how to get the triangles flush against the bottom . Maybe I'm going about it all wrong. Essentially, I'm trying to do something similar to the original DIGG design (<a href="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/11/digg-old-v3-subnavigation-menu.jpg" rel="nofollow">http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/11/digg-old-v3-subnavigation-menu.jpg</a>).</p>
  
  <p>Thank you for your help!</p>