使用面包屑引导导航标签自定义样式

Question

我使用面包屑为自定义导航标签添加了自定义样式。

<div> 
   <div class="breadcrumb">
       <ul class="nav nav-tabs">
          <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
          <li><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
          <li><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
          <li><a href="#complete" data-toggle="tab">Complete</a></li>
       </ul>
  </div>

  <div class="tab-content" style="margin:5%;">
        <div class="tab-pane active" id="submitted">
         Submitted data will be displayed here....
      </div>
      <div class="tab-pane" id="pendingApproval">
        Pending Approvals will be displayed here....
      </div>
      <div class="tab-pane" id="workInProgress">
         In Progress data will be displayed here....
      </div>
      <div class="tab-pane" id="complete">
         Completed data will be displayed here....
      </div>
  </div>
</div>

但是最后一个标签样式看起来不一样。我希望所有标签都采用相同的设计（例如箭头）。如何获取？

正在工作的小提琴：https://jsfiddle.net/70Luf7hu/28/

Answer 1

还需要向外部面包屑div添加剪切路径，并调整边框宽度的padding-right。

https://jsfiddle.net/70Luf7hu/42/

.breadcrumb {
    background: #ddd;
    display: inline-block;
    padding: 1px;
    padding-right: 15px;
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
}