javascript - 如何更改 twitter bootstrap 导航中活动链接背景的形状？

Question

我在我的网站上使用 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;
}

您可能需要对它进行一些试验，但这应该会给您这个想法。