Как правильно оформить тени и border на tab-вкладках?

Question

[barabash2090]

как убрать полосу между .tab-menu li и .tab-content, выровнять tab-menu li и сделать как на картинке:

Comments

[Сергей delphinpro]

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

Answer 1

[Артем]

.tab-content-block .tab-menu{
  ...
  /* 	overflow: hidden; */
}
.tab-menu li.active{
  ...
  position: relative;
}
.tab-menu li.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 10px;
  margin-bottom: -5px;
}

Для выравнивания используйте display: flex

Comments

[barabash2090]

спасибо большое!

[barabash2090]

display:flex использовать для .tab-menu li?

[Артем]

barabash2090, Да. Лучше почитайте документацию к этому свойству и поиграйтесь на сайтах, где примеры интерактивные. Научитесь с display: flex обращаться и любое позиционирование будете делать в два счета.