Bootstrap tabs - custom style

Question

I'm trying to achieve the same kind of 'arrow' styling on bootstrap tabs similar to the screenshot below. How can I achieve something similar?

I have my sample code in jsfiddle where I used bootstrap tabs.

https://jsfiddle.net/70Luf7hu/

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
    <li role="presentation" class="active">
        <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
    <li role="presentation">
        <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>

  </div>

</div>

Answer 1

.nav-tabs > li > a {margin: 0;}
.breadcrumb input[type="radio"] {
display: none;
}
.breadcrumb input[type="checkbox"] {
display: none;
}
.breadcrumb {
background: #ddd;
display: inline-block;
padding: 1px;
padding-right: 14px;
}
.tab-content {
padding: 15px;
}
.breadcrumb li {
display: inline-block;
background: white;
padding: 0;
position: relative;
min-width:50px;
text-decoration: none;
-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%);
margin-right: -13px;
}
.breadcrumb li#last {
-webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-bottom: 2px solid #5cfeea;}
.breadcrumb li:first-child {
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);   
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

<div class="breadcrumb">
   <!-- Nav tabs -->
   <ul class="nav nav-tabs" role="tablist">
      <li role="presentation">
         <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     
      </li>
      <li role="presentation" class="active">
         <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
      </li>
      <li id="last" role="presentation">
         <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
      </li>
   </ul>
   <!-- Tab panes -->
   <div class="tab-content">
      <div role="tabpanel" class="tab-pane" id="home">Home</div>
      <div role="tabpanel" class="tab-pane active" id="office">Office</div>
      <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>
   </div>
</div>

Refer this

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