如何在活动选项卡上创建三角形

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;

}