twitter-bootstrap - 带有自定义边框的 Bootstrap 选项卡

Question

我正在开发向导，其中标题如下图所示。我在 li 元素上使用 Bootstrap-4 选项卡组件和 :after 伪元素方法，但我不知道如何获取两种颜色的背景。

期望的结果

HTML 片段

<ul class="nav classic-tabs nav-justified white" role="tablist">
    <li class="nav-item">
        <a class="nav-link waves-light active" data-toggle="tab" href="#panel61" role="tab"> Frete</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel62" role="tab"> Pagamento</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel63" role="tab"> Revise e Confirme</a>
    </li>
</ul>

CSS 片段

&:after {
    content: '';
    border-right: 1px solid #666666;
    display: block;
    height: 100%;
    top: 0;
    position: absolute;
    transform: skewX(-45deg);
}

实际结果

Answer 1

我可能会设置实际选项卡的样式。设置伪元素的样式会带来一定程度的复杂性，您不想处理这种情况。

在这里，我将选项卡向右倾斜，然后添加一个内部跨度元素将文本倾斜回垂直方向。

我使用pseudo:before 创建第一个选项卡的 90 度左侧。您可以对最后一个选项卡执行相同的操作。解决阴影和边框可能很棘手，但我认为这是可行的。

.nav-tabs .nav-item {
  transform: skew(-22.5deg);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
}

li.nav-item:first-child::before {
  content: '';
  height: 40px;
  background: #fff;
  width: 20px;
  position: absolute;
  transform: skew(22.5deg);
  top: 1px;
  left: -8px;
}

.nav-tabs .nav-item a span {
  transform: skew(22.5deg);
  display: inline-block;
}

<li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab"><span>Home</span></a>
</li>

<强> Fiddle demo