html - 使子选项卡溢出选项卡栏(使用 flexbox)

Question

我正在尝试为某些选项卡添加一点设计效果。

选项卡包含在带有底部边框的选项卡栏内。

当一个选项卡处于事件状态时，我希望它看起来好像与内容处于同一级别，而其他选项卡则向后退。

为此，我需要使事件选项卡下方的边框部分消失 - 我的第一个想法是将选项卡背景设置为白色并与父级重叠 - 但这不起作用。

有人知道如何获得我正在寻找的效果吗？

.container {
  padding: 30px;
}

.tab-bar {
    display: flex;
    background-color: #fff;
    border-bottom: solid 1px rgba(0,0,0, .12);
    height: 48px;
    overflow: hidden;
}
.tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    max-width: 200px;
    min-width: 100px;
    padding: 0 16px;
}

.tab[data-state="active"] {
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 1px 0 rgba(0,0,0,0.12);
  color: red;
}

<div class="container">
  <div class="tab-bar">
    <div class="tab" data-state="active">Active</div>
    <div class="tab">Not Active</div>
  </div>
</div>

• 链接到 JsFiddle

Answer 1

from earlier comment

draw the bottom border from the non active tabs

add eventually a pseudo element to fill the room left.

overflow:hidden on the parent hides shadows and also do not allow children to stand on top of the border in order to hide it

你可以做什么:

.container {
  padding: 30px;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  height: 48px;
}

.tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  min-width: 100px;
  padding: 0 16px;
  border-bottom: solid 1px rgba(0, 0, 0, .12);
}

.tab-bar::after {
  content: '';
  flex: 1;
  border-bottom: solid 1px rgba(0, 0, 0, .12);
}

.tab[data-state="active"] {
  box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
  color: red;
  border-bottom: none;
}

<div class="container">
  <div class="tab-bar">
    <div class="tab" data-state="active">Active</div>
    <div class="tab">Not Active</div>
  </div>
</div>