アクティブなタブで三角形を作る方法

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; 

}

を三角形の形状を作るためにそれを使用してみてください