How can I make an arrowed navbar using css?

Question

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.

If you are not strong with the force (of CSS), I would suggest you to look for breadcrumbs libraries, because it's not an easy task of copy/paste. — avrahamcool, Jul 10 '17 at 05:09

score 2 · Accepted Answer · answered Jul 10 '17 at 05:12

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

How can I make an arrowed navbar using css?

1 Answers1