title: transparent nav tab triangle
body: <p>anyone know how to do transparent triangle like in this <a href="http://i.stack.imgur.com/HMohx.png" rel="nofollow">picture</a>? </p>
  
  <p>been trying like the jsfiddle <a href="http://jsfiddle.net/fM9mh/37/" rel="nofollow">here</a> but didnt manage to change the border to gradient like the color of the tab.</p>
  
  <p>i can do the color triangle but the transparent is a bit tricky.would be glad if someone know how the trick is.thanks in advance!</p>
  
  <p>my code:
  <b>HTML</b></p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="active"&gt;homepage&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;option2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;option3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><b>css</b></p>
  
  <pre><code>body {
     margin: 0;
  }
  
  nav {
     position: fixed;
     background: orange; /* For browsers that do not support gradients */
     background: -webkit-linear-gradient(left, orange , yellow); 
     background: -o-linear-gradient(right, orange, yellow);
     background: -moz-linear-gradient(right, orange, yellow);
     background: linear-gradient(to right, orange, yellow);
     display: block;
     width: 100%;
     padding: 10px 0;
     color: white;
     font-size: 1.5em;
  
     text-align: center;
  }
  
  ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: inline-block;
   }
  
  ul li {
     float: left;
     width: auto;
     padding: 0 20px;
     position: relative;
  }
  
  ul li a {
     text-decoration: none;
  }
  
  nav li a:before,
  nav li a:after {
     content: '';
     position: absolute;
     bottom: -41px;
     left: 0;
     right: 0;
     height: 5px;
     border: 10px transparent solid;
     border-top-color: rgba(0,0,0,.7);
     border-left-width: 0;
     border-right-width: 0;
  }
  nav li a:before {
     right: 50%;
  }
  nav li a:after {
     left: 50%;
  }
  
  nav li a:visited {
    color: white;
  }
  
  nav li a.active:before {
    border-right-width: 10px;
  }
  
  nav li a.active:after {
    border-left-width: 10px;
  }
  
  nav li:first-child a:before { 
    left: -9999999px;
  }
  nav li:last-child a:after { 
    right: -9999999px;
  }
  </code></pre>
  
  <p><b>JS</b></p>
  
  <pre><code>$("nav a").click(function() {
  
    $("nav a").removeClass("active");
    $(this).addClass("active");
  });
  </code></pre>