Как распространить нижнюю границу DIV так, чтобы он перекрывал нижнюю границу своего родителя?

Question

У меня есть группа DIV в одном ряду, как пункты меню. Все предметы заключены в контейнер DIV. Когда щелкает один из внутренних DIV, он получает класс active . Родительский DIV имеет нижнюю границу серого цвета 2px, в то время как активный дочерний DIV получает нижнюю границу зеленого цвета 6px.

Он работает, как и предполагалось, но теперь я бы хотел, чтобы у дочернего элемента была тень от нижнего края родителя. границы, так что 2 нижних пикселя зеленой части скрывают серые и только 4 пикселя высевают над линией.

Я не могу просто передать серый стиль всем другим дочерним элементам, потому что родитель имеет более сложный вид и простирается далеко за пределы детей.

div.parent {
  border-bottom: 5px solid grey;
  display: flex;
}

div.active {
  border-bottom: 10px solid green;
}

<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

Как сделать так, чтобы нижняя граница дочернего элемента затеняла нижнюю границу родительского элемента, сделав ее на 2 пикселя ниже (или любым другим способом)?

Answer 1

Я не уверен, что вы хотите именно этого, но я добавил его в класс .active.

div.active {
  border-bottom: 10px solid green;
  padding: 0 5px;
  margin-bottom: -5px;
}

См. Демонстрацию

div.parent {
  border-bottom: 10px solid grey;
  display: flex;
}

div.active {
  border-bottom: 10px solid green;
  padding: 0 5px;
  margin-bottom: -5px;
}

<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

Answer 2

Вы можете установить отрицательное значение margin-bottom на .child:

div.parent {
  border-bottom: 5px solid grey;
  display: flex;
}

.child {margin-bottom:-5px}

div.active {
  border-bottom: 10px solid green;
}

<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>

Answer 3

Возможное решение может быть таким:

div.parent {
  border-bottom: 5px solid grey;
  display: flex;
}

div.active {
  position: relative;
  padding: 0 0 10px;
}

div.active:after {
  content: '';
  width: 100%;
  display: block;
  position: absolute;
  border-bottom: 10px solid green;
  bottom: -5px;
}

<div class="parent">
  <div class="child">whee</div>
  <div class="child active">whoo</div>
  <div class="child">whaa</div>
</div>