如何將內部邊框添加到引導3透明背景的導航標籤？

Question

我找不出如何隱藏.tab-pane的重疊邊框。我試圖剪裁它，但它仍然可見。

有誰知道任何可以隱藏下邊框的jQuery插件嗎？

請看底部的小提琴。

HTML

<section id="content" class="container"> 
<div class="row"> 
    <div class="tab-forms col-md-12"> 
     <!-- Nav tabs --> 
     <ul class="nav nav-tabs pull-right" role="tablist"> 
      <li role="presentation" class="active"> 
       <a href="#home" aria-controls="home" role="tab" 
                 data-toggle="tab">SIGN UP</a></li> 
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">SIGN 
       IN</a> 
      </li> 
     </ul> 
     <div class="clearfix"></div> 
     <!-- Tab panes --> 
     <div class="tab-content"> 
      <div role="tabpanel" class="tab-pane active" id="home"> 
       <div class="form-border"> 

       </div> 
      </div> 
      <div role="tabpanel" class="tab-pane" id="profile"> 
       <div class="form-border"> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</section> 

CSS

body { 
    background: #155C91; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding-top: 88px; 
    padding-bottom: 20px; 
} 
.tab-forms .nav-tabs { 
    border-bottom: 0; 
} 
.tab-forms .nav-tabs li.active a { 
    background: rgba(255, 255, 255, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0); 
    border-bottom: 0; 
    margin-bottom: 1px; 
    -webkit-clip-path: polygon(0px 0px, 144px 0px, 144px 81px, 0px 81px); 
    /*Chrome,Safari*/ 
    /*Firefox*/ 
} 
.tab-forms .nav-tabs li.active a:before { 
    content: ""; 
    width: 90%; 
    height: 55px; 
    top: 8px; 
    left: 5%; 
    position: absolute; 
    border: 1px solid #fff; 
} 
.tab-forms .nav-tabs li.active a:after { 
    border-bottom: 1px solid #fff; 
    content: ""; 
    width: 127px; 
    height: 55px; 
    top: 8px; 
    left: 7px; 
    position: absolute; 
} 
.tab-forms .nav-tabs li a { 
    margin-right: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    background: rgba(255, 255, 255, 0.1); 
    width: 144px; 
    text-align: center; 
    font-size: 18pt; 
} 
.tab-forms .nav-tabs li a:before { 
    content: ""; 
    width: 80%; 
    height: 25px; 
    top: 8px; 
    left: 11%; 
    position: absolute; 
    border: 1px solid #fff; 
} 
.tab-forms .tab-content { 
    padding: 8px; 
    min-height: 100px; 
    background: rgba(255, 255, 255, 0.2); 
} 
.tab-forms .tab-content .tab-pane { 
    border: 1px solid #ffff00; 
    min-height: 100px; 
} 
rect { 
    fill: red; 
} 

http://jsfiddle.net/52VtD/12901/

https://jsfiddle.net/52VtD/12908/

Answer 1

從.tab-forms .nav-tabs li.active a:after刪除border-bottom屬性和設置border-bottom:none;爲.tab-forms .nav-tabs li.active a:before