jquery - 在一条线上使用 Css 透明箭头

Question

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

我觉得使用实心三 Angular 形有困难吗？我想用一个薄的透明三 Angular 形代替它。Jsfiddle 链接 here

triangle arrow like here

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 三 Angular 形我的问题是如何制作带有尖峰的无缝线指向所选菜单

--^--

Answer 1

如果您的 <li>是相同的宽度，你可以:

• 删除<ul>的边框
• 在所有 <li> 上应用边框不活跃
• 活跃<li>你可以使用:before和 :after模拟边框围绕箭头。
• 并且您需要在 <li> 中添加像 span 这样的元素对于箭头。

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