Bootstrap 选项卡 - 自定义样式
ror*_*y-h 2 css twitter-bootstrap
我试图在引导选项卡上实现类似的“箭头”样式，类似于下面的屏幕截图。我怎样才能实现类似的目标？
我在 jsfiddle 中有我的示例代码，我在其中使用了引导选项卡。
https://jsfiddle.net/70Luf7hu/
<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>
通过使用面包屑类，您可以实现
.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>.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/