Как сверстать 2 тени накалывающихся блока?

Question

[Сергей]

Есть два блока, каждая из которых имеет тень. Например навигация таба и контент таба
Если менять через z-index расположения, в одном случае мы имеем что тень навигации наползает на контент, а в другом тень контента наползает на навигацию

Нужно чтобы тень обтекала всю форму как бы "по маске".
В дизайне это сделано многоугольной формой, то есть это 1 элемент.

Как лучше всего решить подобную проблему?

Пример
https://codepen.io/anon/pen/OENrKw

Comments

[Сергей delphinpro]

Первое, что приходит в голову — перекрыть тень белой плашкой.

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/xzVBmB

[Евгений Соломеин]

вообще span можно не добавлять, но да, самый простой вариант) https://codepen.io/anon/pen/xzVNeY

Answer 1

[forspamonly2]

поставить таб поверх тени основного блока.
обрезать табу нижнюю часть тени - обернуть таб элементом с overflow:hidden и паддингом нулевым снизу, а с трёх остальных сторон под размер тени.