透明导航标签三角形

Question

任何人都知道如何在这个picture中做透明三角形？

尝试像jsfiddle here，但没有设法将边框更改为渐变，就像标签的颜色一样。

我可以做彩色三角形，但是透明有点棘手。如果有人知道这个伎俩是什么的话，会很高兴。谢谢你们！

我的代码： HTML 的

<nav>
<ul>
    <li><a href="#" class="active">homepage</a></li>
    <li><a href="#">option2</a></li>
    <li><a href="#">option3</a></li>
</ul>
</nav>

的CSS

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;
}

JS

$("nav a").click(function() {

  $("nav a").removeClass("active");
  $(this).addClass("active");
});