尖尖的活动标签

使用引导，但是我使用这个竖直突出，我想使活动标签为向右侧的尖结束，但我得到的是一个圆形边缘。我应该如何继续？

我听说它可以完成：后，但我没有得到它。

<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>a { 
    border-radius: 4px; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 25px; 
    border-top-right-radius: 25px; 
}

来源

2017-04-18 Elaine Byene

使用此css，只是border-radius的值更改为自己的喜好：

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

来源

2017-04-18 07:23:09 Swellar

我很抱歉，但是这不是我所期待的。由波蒂，我的意思是有一个尖尖的一面，而不是一个圆润的一面。 –

你可以在你的问题中添加一个Pointy的视觉效果。使用这将删除活动标签的圆角 – Swellar

使用此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; 
}

来源

2017-04-18 07:27:38

这将只在标签被徘徊时生效，不管它是否活动 – Swellar

对不起，但这不是我正在寻找的。由波蒂，我的意思是有一个尖尖的一面，而不是一个圆润的一面。 –

你想要这个http://jsfiddle.net/VpW5x/ –

USI ng :after/:beforepseudo css您可以实现此目的的元素。

下面是一个示例代码。

.nav-pills { 
 
    margin-top: 30px; 
 
} 
 

 
.nav-pills>li>a { 
 
    border-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
    border-bottom-right-radius: 0px; 
 
    border-top-right-radius: 0px; 
 
    padding-right: 22px !important; 
 
} 
 

 
.nav-pills>li { 
 
    position: relative; 
 
} 
 

 
.nav-pills>li.active::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 28px; 
 
    height: 28px; 
 
    background: #337ab7; 
 
    ht: 0px; 
 
    z-index: 9999; 
 
    -moz-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    right: -14px; 
 
    top: 6px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <ul class="nav nav-pills nav-stacked col-xs-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-xs-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>

来源

2017-04-18 07:36:54

尖尖的活动标签

回答

相关问题