如何使用 css 制作带箭头的导航栏？ [关闭]答案

【问题标题】：How can I make an arrowed navbar using css? [closed]如何使用 css 制作带箭头的导航栏？ [关闭]
【发布时间】：2017-07-10 05:04:28
【问题描述】：

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

<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，我会很高兴。谢谢。

【问题讨论】：

使用before, after
这不是一个论坛。
如果你不擅长（CSS的）力量，我建议你寻找面包屑库，因为复制/粘贴不是一件容易的事。

标签： javascript html css bootstrap-tabs

【解决方案1】：

我认为这种设计模式真的是一个“面包屑”。谷歌出现的第一件事是：how to css breadcrumb。我不是特别喜欢 w3schools，但这是一个很好的起点，然后你就可以从那里开始玩这些风格了。

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

【讨论】：