Question

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

Answer 1

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

Answer 2

使用:after/:before 伪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>

Answer 3

使用此<?php $this->load->view('include/header_home')?> <?php $this->load->view($subview)?> <?php $this->load->view('include/footer')?>，只需根据自己的喜好更改css的值：

border-radius

Bootstrap中的Pointy活动选项卡

3 个答案: