Как реализовать такие tabs с тенью?

Question

[Dubrovin]

Тень должна быть у лепестка и у блока с содержимым: 0 8px 32px 0 rgba(0,0,0,0.2)
Кажется, что перебрал уже всё, что только можно перебрать (белая тень снизу, after, border-bottom у лепестка, тройная тень сверху-слева-справа у лепестка, шаманил по разному с z-индексами) - результат не такой, как на картинке.
Возможно такое сделать с помощью CSS3?

Answer 1

[Александр]

похоже?

выглядит как костыль. особенно вот это width: calc(100% + 20px);

Comments

[Dubrovin]

Теперь сделайте активной вторую вкладку и увидите эффект, который я описал в другом комментарии:

[Александр]

Dubrovin, так?

[Dubrovin]

Александр, да, идея не плохая, но в таком случае before перекрывает контент таба, нужно точно также, только чтобы в табы можно было добавлять контент и он отображался))

[Александр]

Dubrovin, ну тогда вместо псевдо можно сделать div вот так

[Dubrovin]

Александр, тогда контейнер схлопнется в ноль по высоте. Задавать явно высоту контейнеру нельзя (в вашем примере 100px) - высота контейнера должна зависеть от высоты содержимого.

[Dubrovin]

Добавил через before белую полосу у контейнера с top:0, bottom: calc(100% - $padding), z-index: 1. Т.е. на высоту отступа внутри контейнера. Всё получилось! Большое спасибо за наводку!

Answer 2

[Alexander Pushkarev]

https://codepen.io/ekscentrysytet/pen/QbNdEB

Для этого потребовалось:
1 - google tabs shadows css
2 - нажать на первую ссылку

Comments

[Dubrovin]

Конечно же нет, обратите внимание во-первых тени разные у лепестка и контента (по краю тень идёт не ровно), во-вторых из-за того, что нижний блок с белым цветом под лепестком шириной равен лепестку - он обрезает тень и это очень заметно, если вы сделаете именно большую тень (читайте внимательно вопрос, какая должна быть тень). Если бы всё было так очевидно - вопрос не был бы задан.

[Dubrovin]

Приложу скриншот как это смотрится с другой тенью (такая вёрстка имхо крайне непрофессиональна)

[Никита Егоров]

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

[Dubrovin]

Никита Егоров, если вы не знаете о чём идёт речь - ничего не пишите. Пример, который дан выше, не содержит абсолютно никакой полезной информации

[Никита Егоров]

Dubrovin, так?

[Dubrovin]

Никита Егоров, нет, во-первых ненужный border в 1px серого цвета, во-вторых тень на лепестке не корректно падает (не сочетается с тенью у контента), в третьих есть эффект, который я описываю и показал на скриншоте в соседнем комментарии (под лепестком справа от белого оверлея - не белый цвет (часть боковой тени) )

[Никита Егоров]

ненужный border в 1px серого цвета

ну так уберите

лепестке

?

не сочетается с тенью у контента

контент не трогал, только табы, там по анологии

в третьих есть эффект, который я описываю и показал на скриншоте в соседнем комментарии

Не вижу сходств

[Dubrovin]

Никита Егоров, скриншот увеличьте в фотошопе и посмотрите внимательней (!)