bootstrap 导航标签 - 使用面包屑的自定义样式

Question

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

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

但最后一个选项卡样式看起来 different.I 希望所有选项卡采用相同设计（如箭头）。我怎样才能得到它？

工作 fiddle：https://jsfiddle.net/70Luf7hu/28/

Answer 1

您还需要将 clip-path 添加到外部面包屑 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%);
}

bootstrap 导航标签 - 使用面包屑的自定义样式

bootstrap nav tabs-custom style using breadcrumbs

css

breadcrumbs