如何使用 css 制作带箭头的导航栏？

Question

我可以使用代码设计导航标签：

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

但我希望我的选项卡设计带有箭头到右侧，如图所示。如果有人能帮我弄清楚 css 是什么，我会很高兴。谢谢。

Answer 1

这个设计模式我觉得真是"breadcrumb"。 google 中出现的第一件事是：how to css breadcrumb。我不是特别喜欢 w3schools，但它是一个很好的起点，然后你可以从那里开始玩 w/ 风格。

关于箭头，您可能需要查看 CSS Triangle generator

如何使用 css 制作带箭头的导航栏？

How can I make an arrowed navbar using css?

html

javascript

css

bootstrap-tabs