如何在活动选项卡上制作三角形形状

Question

我正在使用引导程序创建动态选项卡，一旦您单击选项卡，就会弹出较粗的黑色下划线。像这样：

我把在黑线的代码是：

.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover { 
border-bottom: 2px solid #000; 
} 

不过，我想黑线有一个倒挂在底部三角形就像这样：

有什么办法，我可以创建CSS是三角形，并将其添加到我的选择的标签？我不知道如何去做这件事，任何帮助将不胜感激。

感谢

Answer 1

尝试用它来使活动标签

.nav-tabs.nav-justified>.active>a:after { 
content: ''; 
width: 0; 
height: 0; 
border-top: 5px solid #000; 
border-right: 5px solid transparent; 
border-left: 5px solid transparent; 
display: block; 
margin: auto; 

}

上三角形