oi, estou desenvolvendo uma página html e estou utilizando bootstrap, gostaria de fazer um menu com abas e que fosse levemente iclinado para direita... mais ou menos como essa ideia do arquivo...
segue meu código html:
<ul class="nav nav-tabs" id="#" role="tablist">
<li class="nav-item active">
<a class="nav-link" id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <i class=" fa fa-list-alt"></i> Tarefa</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><i class="fa fa-lightbulb-o"></i> Sugestão</a>
</li>
<li class="nav-item">
<a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><i class=" fa fa-search"></i> FAQ</a>
</li>
</ul>
segue meu código css:
[![.nav-tabs {
border-bottom: 2px solid var(--cor-primaria-2);
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
/* margin-top: 0px; */
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid;
border-bottom: 0px;
border-radius: 4px 4px 0 0;
color: #666666;
background: rgba(204, 204, 204, 0.1803921568627451);
}
.nav-tabs > li > a:hover {
border-color: #FFFFFF;
}