css - クリップパスとドロップダウンは異なる形状を引き起こします

Question

ナビゲーションで CSS スタイルのクリップパスを使用して、コーナーの背景の形状を変更しています。コンテンツ領域にドロップダウンを追加するまで、これは期待どおりに機能します。

ドロップダウンが非表示のときは形状が正しく表示され、ドロップダウンが表示されているときは形状が変化します。私の調査によると、これは要素の幅と高さを使用して要素のクリッピングを決定するクリップパスが原因であり、ドロップダウンが表示されると要素の高さが変化します。

この動作を変更する方法はありますか? 私の目標は、ドロップダウンが表示されているかどうかに関係なく、同じクリッピングを維持することです。

CSS

.dropdown {
  background-color: #000;
  -webkit-clip-path: polygon(100% 0,100% 0,100% 100%,10% 100%,0 0);
  clip-path: polygon(100% 0,100% 0,100% 100%,10% 100%,0 0);
  padding-left: 50px;
}


.nav .open>a:focus,
.nav>li>a:focus,
.nav>li>a:hover,
.dropdown:focus,
.dropdown:hover,
.nav .open>a {
  background-color: #000;

}

.dropdown-menu {
  float: right;
  right: 0px;
  left: auto;
}`

HTML

<div id="navbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu goes here <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
      </ul>
    </li>
  </ul>
</div>

JSFiddle

https://jsfiddle.net/7hg1efdj/1/