时间戳

首页 > 解决方案 > 带有自定义角的引导选项卡

html - 带有自定义角的引导选项卡

问题描述

我有基于 Bootstrap 4 模板的选项卡，但最近我遇到了这个问题：我需要在底部制作平滑的角，更多细节在下面布局的屏幕截图中。

什么是可用的： 在此处输入图像描述

应该做什么（我用红色圈出）：

在此处输入图像描述

我的代码：

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a>
    </li>
    <li class="nav-item">
        <a class="home2 nav-link" data-toggle="tab" href="#characteristics">Tab2</a>
    </li>
    <li class="nav-item">
        <a class="home3 nav-link" data-toggle="tab" href="#opinion">Tab3</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="description"></div>
    <div class="tab-pane fade" id="characteristics"></div>
    <div class="tab-pane fade" id="opinion"></div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

也许会有所帮助。

.nav-tabs .nav-link {
    position: relative;
}

.nav-tabs .nav-link:focus::after,
.nav-tabs .nav-link:focus::before,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link:hover::before,
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active::before {
    content: "";
    border: 1px solid;
    width: 8px;
    height: 8px;
    position: absolute;
    top: -1px;
    z-index: 9;
    background-color: #fff;
}

.nav-tabs .nav-link:focus::after,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link.active::after {
    border-color: #fff #dee2e6 #dee2e6 #fff;
    border-radius: 0.25rem 0;
    left: -1px;
}

.nav-tabs .nav-link:focus::before,
.nav-tabs .nav-link:hover::before,
.nav-tabs .nav-link.active::before {
    border-color: #fff #fff #dee2e6 #dee2e6;
    border-radius: 0 0.25rem;
    right: -1px;
}
<!-- Libraries -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>


<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a>
    </li>
    <li class="nav-item">
        <a class="home2 nav-link" data-toggle="tab" href="#characteristics">Tab2</a>
    </li>
    <li class="nav-item">
        <a class="home3 nav-link" data-toggle="tab" href="#opinion">Tab3</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="description"></div>
    <div class="tab-pane fade" id="characteristics"></div>
    <div class="tab-pane fade" id="opinion"></div>
</div>

推荐阅读