Question

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

期望的结果

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

我可能会设置实际标签的样式。样式伪元素带来了您不想处理的复杂程度。

这里我正在向右倾斜标签，然后添加内部跨度元素以将文本倾斜回垂直。

我正在使用伪：之前创建第一个标签的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

Answer 2

此处基于Isherwood答案的版本修复了第一个和最后一个标签边框问题。我知道这不是最有效的解决方案，但运作良好。

结果

HTML代码

<div class="tabs-wrapper z-depth-1">
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li class="nav-item">
            <a class="nav-link active first" data-toggle="tab" href="#frete" role="tab"><span>Frete</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#pagamento" role="tab"><span>Pagamento</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link last" data-toggle="tab" href="#confirmacao" role="tab"><span>Revise e Confirme</span></a>
        </li>
    </ul>
</div>

CSS代码（SASS）

.tabs-wrapper {
    margin-top: 5rem;

    .nav {
      background-color: $cinza;
      padding: 0;

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

        .nav-link {
          @include transition(all 1s);
          color: $gray-500;
          background-color: $cinza;

          span {
            font-size: 1.2rem;
            transform: skew(22.5deg);
            display: inline-block;
            padding: 1rem 0;
          }

          &.active {
            @include transition(all 1s);
            background-color: #fff;
            color: $gray-900;
            font-weight: 700;
          }

          &.first {
            &:before {
              @include transition(all 1s);
              position: absolute;
              content: '';
              background: $cinza;
              height: 100%;
              width: 2rem;
              top: 0;
              left: -1rem;
              transform: skew(22.5deg);
            }

            &.active {
              &:before {
                @include transition(all 1s);
                background: #fff;
              }
            }
          }

          &.last {
            &:before {
              @include transition(all 1s);
              position: absolute;
              content: '';
              background: $cinza;
              height: 100%;
              width: 2rem;
              top: 0;
              right: -1rem;
              transform: skew(22.5deg);
            }

            &.active {
              &:before {
                @include transition(all 1s);
                background: #fff;
              }
            }
          }
        }
      }
    }

带自定义边框的Bootstrap选项卡

2 个答案: