Search code examples
javascripthtmlcssbootstrap-tabs

How can I make an arrowed navbar using css?

I am able to design nav tabs using code:

<div class="container-fluid">
    <ul class="nav nav-pills">
        <li class="active"><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
</div>

But i want my tabs design with arrows to right side as in picture. I will be glad if someone can help me out what is the css for this. Thanks. navbar

Solution

  • This design pattern I think is really a "breadcrumb". the first thing that comes up in google is: how to css breadcrumb. I don't particularly like w3schools, but it's a good starting point, then you can just play w/ the styles from there.

    As far as the arrows, you may want to check out CSS Triangle generator