javascript - Twitterブートストラップのナビゲーションでアクティブリンクの背景の形状を変更するには?

Question

私は自分の Web サイトで Twitter Bootstrap を使用しており、ナビゲーションとして Nav(基本的な錠剤) を使用しています。

リストメニューまたはホバー効果をクリックすると、デフォルトの動作は、背景の形状が長方形であることを示すことです。

今私の問題は、その形状を独自のカスタマイズ形状に変更したいということです。これを行う正しい方法を教えてください。

デフォルトの形状は

私が欲しい形は

Answer 1

次のようなピルを提供する CSS を次に示します。

.nav-pills > li.active > a {
   position: relative;
   border-radius: 0px !important;
}

.nav-pills > li.active > a::after {
   border-top: 15px inset transparent;
   border-bottom: 15px inset transparent;
   border-left: 20px solid #08C;
   position: absolute;
   content: "";
   top: 0;
   right: -20px;
}

おそらく少し試してみる必要がありますが、それでアイデアが得られるはずです。