CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Elaine Byene
Elaine Byene

Reputation: 4142

Pointy active tab in Bootstrap

JSFIDDLE

Using Bootstrap, I'm using this vertical tabs however, I want to make the active tab into a pointy end towards the right side but all I got is a rounded edge. How should I go ahead?

I heard it can be done with :after but I failed to get it going.

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

Upvotes: 0

Views: 360

Answers (3)

Bhupesh
Bhupesh

Reputation: 881

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

Upvotes: 3

Sahil Dhir
Sahil Dhir

Reputation: 4250

Using :after/:before pseudo css elements you can achieve this.

Below is an exampple code.

.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>

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

Use this css, just change the value of the border-radius to your liking:

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

Upvotes: 0

Related Questions