부트 스트랩 탭 - 맞춤 스타일

아래의 스크린 샷과 유사한 부트 스트랩 탭에서 '화살표'스타일과 동일한 종류의 스타일을 얻으려고합니다. 어떻게하면 비슷한 것을 얻을 수 있습니까?부트 스트랩 탭 - 맞춤 스타일

부트 스트랩 탭을 사용하는 jsfiddle에 샘플 코드가 있습니다.

<div> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation"> 
     <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>  </li> 
    <li role="presentation" class="active"> 
     <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a> 
    </li> 
    <li role="presentation"> 
     <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a> 
    </li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane" id="home">Home</div> 
    <div role="tabpanel" class="tab-pane active" id="office">Office</div> 
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div> 

    </div> 

</div>

출처

2017-12-22 rory-h

? BS 코드 만 넣었고 자신 만의 스타일링을하지 않은 것으로 보입니다. 또한 귀하의 바이올린에는 BS js가 포함되어 있지 않습니다. – disinfor

출발점으로 [CSS의 배너에서 화살표 모양 만들기] (https://stackoverflow.com/questions/18077051/achieving-arrow-like-shapes-in-a-banner-in-css)를 확인하십시오.) 또는 [CSS에서만이 화살표를 만드는 방법?] (https://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only) – roctothorpe

이동 경로 클래스를 사용하여 당신은 달성 할 수

.breadcrumb { 
 
     background: #ddd; 
 
     display: inline-block; 
 
     padding: 1px; 
 
     padding-right: 18px; 
 

 
    } 
 

 
    .breadcrumb li { 
 
     display: inline-block; 
 
     background: white; 
 
     padding: 0; 
 
     position: relative; 
 
     min-width:50px; 
 
     text-decoration: none; 
 
     -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%); 
 
     clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%); 
 
     margin-right: -13px; 
 
    } 
 

 
    .breadcrumb li#last { 
 
     -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%); 
 
     clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%); 
 
    } 
 

 
    .breadcrumb li:hover { 
 
     color: white; 
 
     background: #fff; 
 
    } 
 

 
    /* first link should not have anything cliped on the left side */ 
 
    .breadcrumb li:first-child { 
 
     -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); 
 
     clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); 
 
    } 
 

 
    .label{ 
 
     height: 100%; 
 
     width: 100%; 
 
    }

<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { 
 
border:0; 
 
background-color:#fff; 
 
} 
 
.nav-tabs > li > a{padding:10px 30px} 
 
    .nav-tabs > li.active { 
 
    border-bottom:3px solid cyan; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<div class="breadcrumb"> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation"> 
 
     <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>  </li> 
 
    <li role="presentation" class="active"> 
 
     <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a> 
 
    </li> 
 
    <li id="last" role="presentation"> 
 
     <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a> 
 
    </li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane" id="home">Home</div> 
 
    <div role="tabpanel" class="tab-pane active" id="office">Office</div> 
 
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div> 
 
    
 
    </div> 
 

 
</div> 
 

 

 
</body> 
 
</html>

출처

2017-12-22 04:36:44

.nav-tabs > li > a {margin: 0;} 
.breadcrumb input[type="radio"] { 
display: none; 
} 
.breadcrumb input[type="checkbox"] { 
display: none; 
} 
.breadcrumb { 
background: #ddd; 
display: inline-block; 
padding: 1px; 
padding-right: 14px; 
} 
.tab-content { 
padding: 15px; 
} 
.breadcrumb li { 
display: inline-block; 
background: white; 
padding: 0; 
position: relative; 
min-width:50px; 
text-decoration: none; 
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%); 
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%); 
margin-right: -13px; 
} 
.breadcrumb li#last { 
-webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%); 
clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%); 
} 
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-bottom: 2px solid #5cfeea;} 
.breadcrumb li:first-child { 
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); 
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); 
}

<div class="breadcrumb"> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation"> 
     <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>  
     </li> 
     <li role="presentation" class="active"> 
     <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a> 
     </li> 
     <li id="last" role="presentation"> 
     <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a> 
     </li> 
    </ul> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane" id="home">Home</div> 
     <div role="tabpanel" class="tab-pane active" id="office">Office</div> 
     <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div> 
    </div> 
</div>

은 참조지금까지 시도 이것이

https://jsfiddle.net/70Luf7hu/10/

출처

2017-12-22 06:42:43 shrikantbishoye

부트 스트랩 탭 - 맞춤 스타일

답변

관련 문제