在直线上使用Css透明箭头

Question

我需要将设计转换为html。设计显示一个透明的箭头指向当前选择的选项卡。

我用一个填充的三角形有困难吗。我想把它换成一个薄的透明三角形。Jsfidle链接此处

三角形箭头，如

li {
      width:100px;
      list-style-type:none;
      float:left;  
      color:#fff;
       padding:10px 5px;
     position:relative;
    text-align:center;
}
li.selected:after {
 border: 8px solid transparent;
 border-top: none;
 border-bottom-color:#fff;
 position:absolute; 
    bottom:-10px;
 left:40%;   
    content:' ';
}

我使用了瘦图像而不是css三角形，我的问题是如何制作无缝的线条，上面有一个指向所选菜单的尖峰

--^--

Answer 1

如果<li>的宽度相同，则可以：

• 从<ul>中删除边框
• 在所有未激活的<li>上应用边框
• 在活动的<li>上，您可以使用:before和:after模拟边界绕过箭头
• 您需要在<li>中为箭头添加span之类的元素

演示：http://jsfiddle.net/np6ztcav/4/