Html 引导中的尖头活动选项卡

使用Bootstrap，我使用这个垂直选项卡，但是，我想使活动选项卡成为指向右侧的尖端，但我得到的只是一个圆边。我该怎么做

我听说它可以用：之后完成，但我没能让它开始

<div class="container">
<ul class="nav nav-pills nav-stacked col-md-3">
  <li class="active"><a href="#tab_a" data-toggle="pill"><span class="icon icon-percentage"></span> Sales <span class="pull-right">6</span></a></li>
  <li><a href="#tab_b" data-toggle="pill"><span class="icon icon-cube"></span> Operations</a></li>
  <li><a href="#tab_c" data-toggle="pill"><span class="icon icon-labs"></span> Labs</a></li>
  <li><a href="#tab_d" data-toggle="pill"><span class="icon icon-delivery"></span> Enabling Functions</a></li>
</ul>
<div class="JobsListing tab-content col-md-9">
        <div class="tab-pane active" id="tab_a">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="tab-pane fade" id="tab_b">
             <h4>Pane B</h4>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="tab-pane fade" id="tab_c">
             <h4>Pane C</h4>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="tab-pane fade" id="tab_d">
             <h4>Pane D</h4>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
</div>
</div>

---

使用此

css

，只需根据您的喜好更改

边界半径的值即可：

.nav-pills>li.active {
    border-radius: 0;
}

使用此
css
，只需根据您的喜好更改
边界半径的值即可：

.nav-pills>li.active {
    border-radius: 0;
}

使用这个css

.nav-pills>li>a {
 border-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}
.nav-pills>li.active a{
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills>li.active:after {
   content:"";
   position: absolute;
   left: 100%;
   top:0px;
   width:0px;
   height:0px;
   border-top:20px solid transparent;
   border-left:40px solid #337ab7;
   border-bottom:20px solid transparent;
}

使用这个css

.nav-pills>li>a {
 border-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}
.nav-pills>li.active a{
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills>li.active:after {
   content:"";
   position: absolute;
   left: 100%;
   top:0px;
   width:0px;
   height:0px;
   border-top:20px solid transparent;
   border-left:40px solid #337ab7;
   border-bottom:20px solid transparent;
}

使用
:after/:before
伪css元素可以实现这一点

下面是一个示例代码


.nav药丸{
边缘顶部：30px；
}
.nav药丸>li>a{
边界半径：4px；
边框左下半径：4px；
边框右下半径：0px；
边框右上角半径：0px；
右边填充：22px！重要；
}
.nav药丸>李{
位置：相对位置；
}
.nav药丸>li.active:：之前{
内容：''；
位置：绝对位置；
宽度：28px；
高度：28px；
背景#337ab7；
ht:0px；
z指数：9999；
-moz变换：旋转（45度）；
-webkit变换：旋转（45度）；
右图：-14px；
顶部：6px；
}







Lorem ipsum dolor sit amet

窗格B
Lorem ipsum dolor sit amet

窗格C
Lorem ipsum dolor sit amet

窗格D
Lorem ipsum dolor sit amet

使用
:after/:before
伪css元素可以实现这一点

下面是一个示例代码


.nav药丸{
边缘顶部：30px；
}
.nav药丸>li>a{
边界半径：4px；
边框左下半径：4px；
边框右下半径：0px；
边框右上角半径：0px；
右边填充：22px！重要；
}
.nav药丸>李{
位置：相对位置；
}
.nav药丸>li.active:：之前{
内容：''；
位置：绝对位置；
宽度：28px；
高度：28px；
背景#337ab7；
ht:0px；
z指数：9999；
-moz变换：旋转（45度）；
-webkit变换：旋转（45度）；
右图：-14px；
顶部：6px；
}







Lorem ipsum dolor sit amet

窗格B
Lorem ipsum dolor sit amet

窗格C
Lorem ipsum dolor sit amet

窗格D
Lorem ipsum dolor sit amet

这仅在选项卡悬停时有效，无论它是否处于活动状态。很抱歉，这不是我想要的。所谓尖头，我的意思是有尖头的一面，而不是圆的一面。是的，没错。但只在右边。让我来看看代码。谢谢。这将只在选项卡悬停时生效，无论它是否处于活动状态。对不起，这不是我要找的。所谓尖头，我的意思是有尖头的一面，而不是圆的一面。是的，没错。但只在右边。让我来看看代码。谢谢。对不起，这不是我要找的。我指的是尖尖的一面，而不是圆的一面。你能在你的问题中加入尖尖的视觉效果吗。使用此选项将删除活动选项卡的圆角对不起，这不是我要找的。我指的是尖尖的一面，而不是圆的一面。你能在你的问题中加入尖尖的视觉效果吗。使用此选项将删除活动选项卡的圆角