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>

也许会有帮助

.nav选项卡.nav链接{
位置：相对位置；
}
.nav选项卡.nav链接：focus:：after，
.nav选项卡.nav链接：焦点：：之前，
.nav选项卡.nav链接：hover:：after，
.nav选项卡.nav链接：hover:：before，
.nav tabs.nav link.active:：after，
.nav tabs.nav link.active:：before{
内容：“；
边框：1px实心；
宽度：8px；
高度：8px；
位置：绝对位置；
顶部：-1px；
z指数：9；
背景色：#fff；
}
.nav选项卡.nav链接：focus:：after，
.nav选项卡.nav链接：hover:：after，
.nav tabs.nav link.active:：after{
边框颜色：#fff#dee2e6#dee2e6#fff；
边界半径：0.25雷姆0；
左：-1px；
}
.nav选项卡.nav链接：焦点：：之前，
.nav选项卡.nav链接：hover:：before，
.nav tabs.nav link.active:：before{
边框颜色：#fff#fff#dee2e6#dee2e6；
边界半径：0.25雷姆；
右：-1px；
}

这是否回答了您的问题@GameO7er，不，这对我的问题没有帮助：（哇！这太棒了，但不是我想要的：（我更新了问题的描述，第二张图片显示了我需要的内容。我看到了这个问题的自定义解决方案，但它们无法像引导默认情况下那样正确包装在框架中。