загрузочные навигационные вкладки - пользовательский стиль с использованием хлебных крошек

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

Вам также необходимо добавить путь обрезки к внешнему элементу Breadcrumb и настроить отступ справа для ширины границы.

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%);
}