Bootstrap4でタブのナビゲーションを作成しようとしています。
https://v4-alpha.getbootstrap.com/components/navs/

このようなイメージのデザインを実現したいです。
良いコードはありませんでしょうか？
現在、下記のような感じでまずは形を作りかけています。

アクティブなタブ以外にbox-shadowをかけるのと▼の表示切り替えとかは、il.activeを使えば、いけそうだと思うのですが、試行錯誤するものの、ul.nab-tabsがli.nav-itemの下の下向きの三角までを囲ってしまい、背景色が▼まで含んでしまうのと、メニュー４の右側の背景を右いっぱいまで伸ばす、というところで良いアイデアが浮かびません；；

どなたか、助けていただけるとありがたいです。

.nav-tabs {
  background: $m-gray;
}
.nav-item{
  color: #fff;
  text-align: center;
  .nav-link {
    background: #eee;
    padding: 14px 24px;
    border-radius: 0;
  }
}
.nav-item:after{
  content: "";
  display: block;
  margin:auto;
  width:0;
  border: 12px solid transparent;
  border-top: 12px solid #004B4C;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  <div class="wrapper">
    <!-- tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#1" role="tab">メニュー１</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#2" role="tab">メニュー２</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#3" role="tab">メニュー３</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#4" role="tab">メニュー４　</a></li>
    </ul>

    <!-- tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="1" role="tabpanel">コンテンツ１</div>
      <div class="tab-pane" id="2" role="tabpanel">コンテンツ２</div>
      <div class="tab-pane" id="3" role="tabpanel">コンテンツ３</div>
      <div class="tab-pane" id="4" role="tabpanel">コンテンツ４</div>
    </div>
  </div>
</section>