Comment faire une forme de triangle sur l'onglet actif

Question

Je crée un onglet dynamique avec bootstrap où une fois que vous cliquez sur un onglet, un soulignement noir plus épais apparaîtra. Comme si:

Le code que je mets dans la ligne noire est:

.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; 
} 

Cependant, je veux la ligne noire d'avoir un triangle à l'envers sur le fond comme ceci:

Est-il possible que je peux créer cette forme de triangle avec css et l'ajouter à mon onglet sélectionné? Je ne suis pas sûr de savoir comment faire cela, toute aide sera appréciée.

Merci

Answer 1

essayer de l'utiliser pour faire la forme de triangle sur l'onglet actif

.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; 

}