title: Pure HTML/CSS to create triangle pointer under button
body: <p>Currently I have a div that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/rRlPY.png" alt="enter image description here"></p>
  
  <p>I need to edit the HTML/CSS so that it displays like this with a small triangle underneath. Ideally, I would like to do this using purely HTML and CSS, no image files. According to <a href="http://css-tricks.com/snippets/css/css-triangle/st" rel="noreferrer">CSS-Tricks</a> it can be done.</p>
  
  <p><img src="https://i.stack.imgur.com/gY32h.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;div class="triangle"&gt;&lt;/div&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="users/index.html"&gt;&lt;div class="triangle"&gt;&lt;/div&gt;Manage Users&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="tickets/index.html"&gt;&lt;div class="triangle"&gt;&lt;/div&gt;Manage Tickets&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="reports/index.html"&gt;&lt;div class="triangle"&gt;&lt;/div&gt;Reports&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#nav {
      float: right;
      margin: 0;
      padding: 8px 0 0 0;
      list-style: none;
      display: inline-block;
  }
  
  #nav li {
      float: left;
      padding: 7px 5px;
      margin: 0 5px;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
      border-radius: 7px;
  }
  
  #nav li a {
      color: #0b70cc;
      text-decoration: none;
      padding: 7px 5px;
  }
  
  #nav li.active a {
      color: #ffffff;
  }
  
  #nav li.active {
      background-color: #0b70cc;
      color: white;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/wpeKy/" rel="noreferrer">JSFiddle</a></p>
  
  <p>If anyone can help me do this I'd really appreciate it!</p>