带直角括号的样式选项卡

Question

我有一个带有下一步按钮的多步表单，它将转到下一个选项卡。我想定制如下所示的标签设计，

我为此使用了标记，但它没有按预期正确显示

还有其他方法可以解决这个问题吗？

这是我的 HTML 和 CSS 代码

#progressbar {
height: 50px;
width: 100%;
overflow: hidden;
border: 4px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}

#progressbar div {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: white;
    position: relative;
    display: inline-block;
    color: crimson;
}

    #progressbar div:not(:first-child) {
        margin-left: 0px;
    }

    #progressbar div.active {
        background-color: lightcoral;
    }

    #progressbar div:not(:last-child)::before,
    #progressbar div:not(:last-child)::after {
        content: '';
        position: absolute;
    }

#progressbar .acitive:not(:last-child)::before {
    background-color: lightcoral;
}

#progressbar div.active:not(:last-child)::before {
    background-color: lightcoral;
}

#progressbar div:not(:last-child)::before {
    right: -10px;
    top: 0px;
    height: 60px;
    width: 37px;
    border: 4px solid black;
    transform: rotate(45deg);
    z-index: 2;
}

#progressbar div:not(:last-child)::after {
    top: 0px;
    right: 0;
    height: 45px;
    width: 43px;
    background-color: inherit;
    z-index: 2;
}

<div id="progressbar">
                <div class="active" id="Details"><strong>Details&BioData</strong></div>
                <div id="Educational"><strong>Educational Qualification</strong></div>
                <div id="Attachement"><strong>Attachement Of Forms</strong></div>
                <div id="Training Details"><strong>Training Details</strong></div>
                <div id="Confirmation"><strong>Confirmation</strong></div>
            </div>

我可以使用图像来分隔每个选项卡而不是使用标记吗？任何帮助将不胜感激。

将 z-index 值设置为 -1 后

这是将 z-index 设置为 2 后的样子

Answer 1

我们可以使用 ::after 和 ::before 伪元素轻松实现。

我使用了 div 个元素而不是 li 这样我们在设计时可以有更多的控制权。

这是一个例子：

#progressbar {
  height: 40px;
  width: 100%;
  overflow: hidden;
  border: 4px solid black;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

#progressbar div {
  padding-left: 4px;
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: white;
  position: relative;
  display: inline-block;
  color: crimson;   
}


#progressbar div:not(:first-child) {
  margin-left: 24px;
}

#progressbar div.active {
  background-color: lightcoral;
}

#progressbar div:not(:last-child)::before,
#progressbar div:not(:last-child)::after {
  content: '';
  position: absolute;
} 

#progressbar .acitive:not(:last-child)::before {
  background-color: lightcoral;
}

#progressbar div.active:not(:last-child)::before {
 background-color: lightcoral;
}

#progressbar div:not(:last-child)::before {
  right: -13.5px;
  top: -1px;
  height: inherit;
  width:  30px;
  border: 4px solid black;
  transform: rotate(45deg);
  z-index: -1;
}

#progressbar div:not(:last-child)::after {
  top: 0px;
  right: 0;
  height: inherit;
  width: 80%;
  background-color: inherit;
  z-index: -1;
}

<div id="progressbar">
  <div class="active" id="Details"><strong>Details&BioData</strong></div>
  <div id="Educational"><strong>Educational Qualification</strong></div>
  <div id="Attachement"><strong>Attachement Of Forms</strong></div>
  <div id="Training Details"><strong>Training Details</strong></div>
  <div id="Confirmation"><strong>Confirmation</strong></div>
</div>

编码愉快！

带直角括号的样式选项卡

Styling Tabs With Right Angle Bracket

html

css

tabs