问题描述
正如您在所附的屏幕截图中所见,我正在尝试删除边框中的对角线边缘。我该怎么办?
演示:https://jsfiddle.net/3cxn1pbs/
HTML:
<div class="container">
<div class="row mt-2">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">About</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Yo</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
</div>
CSS
.nav {
border-radius: 4px;
border: solid 1px #dddddd;
background-color: #ffffff;
height: 100%;
min-height: calc(100vh - 200px);
}
.nav-pills .nav-link {
border-radius: 0;
}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
color: #333;
background-color: #e6f8fd;
border-right: 4px solid #00b0e6;
border-radius: 0px;
font-weight: 600;
}
.nav-link {
border-bottom: 1px solid #ddd;
border-radius: 0;
color: #333;
}
.nav.flex-column a:first-child,.nav.flex-column a:first-child:hover {
border-top-right-radius: 3px !important;
border-top-left-radius: 3px !important;
}
.nav-link:hover {
color: #333;
background-color: #e6f8fd;
border-radius: 0px !important;
border-right: 4px solid #00b0e6;
}
解决方法
问题是因为您同时具有border-right和border-bottom,请查看跟随代码段中border的行为。
.container {
height: 100px;
width: 100px;
background-color: transparent;
border-top: 20px green solid;
border-right: 20px orange solid;
border-bottom: 20px silver solid;
border-left: 20px red solid;
}
<div class="container">
</div>
如果不希望使用对角线,则应删除边框底部的对角线,而可以使用边框顶部来分隔选项卡。
.nav .nav-link {
border-bottom: 0px !important;
}
.nav .nav-link {
border-top: 1px #dddddd solid;
}
在每个标签之间留出空格:
您还可以同时删除border-top和border-bottom,使用margin / top / bottom作为 子项,然后将背景色添加到父容器中。