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;
}

您可能需要稍微尝试一下，但这应该会给您带来想法。