Как создать такую форму обводки блока?

Question

[Jack London]

На сайте есть меню, разбитое на несколько вкладок (табов), внутри каждой вкладки подменю. В общем это не важно, так как реализовать вкладки не составило трудности. Но есть одно "но", у этого блока в дизайне есть обводка/окантовка, да и еще не просто линия, а линия с внутренней и наружной тенью, причем НЕ прямоугольной формы, то есть border + border-radius + box-shadow не подходит. Причем вставить картинкой тоже не получится, так как размер всегда динамически меняется из-за разного контента вкладок. Можно попробовать разбить все это на маленькие кусочки и попробовать слепить все на css, но получится большой единорог-велик-костыль, а хотелось бы нормальное решение. На ум приходит только рисование canvas, но с моими навыками я буду это до Нового года рисовать. Вот приблизительная форма линии которую нужно получить:



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

Answer 1

[Lord_Dantes]

Покажите примерное наполнение контента, может картинку сделать SVG и чтобы она растягивалась по высоте как бы

Comments

[Jack London]

Возможно svg не плохая идея, но меняется высота не самого блока, а грубо говоря и вкладок и контента, причем они никак не зависят друг от друга. Добавил более детальную картинку.

[Lord_Dantes]

Jack London, тю так все просто делаете табам такую обводку, делаете контенту такую обводку.
Далее создать какую нить подкладку между ними которая будет перекрывать линию от контента и табов.

[Jack London]

slave, да, изначально я тоже так думал. Проблему вызывает участок линии, где есть прямой угол. Если бы линия была без тени, то вообще без проблем реализовать, а вот с тенью непонятно.

[Lord_Dantes]

Jack London, не понимаю что вы имеете ввиду. Если прямое пересечение там где "таб" и линия то там можно просто псевдоэлемент наложить и все.

[Jack London]

slave, а, я понял, почему Вам не понятно. Возможно я немного не так объяснил. Вообще подкладку с помощью псевдоэлемента сделать можно без проблем, но её нельзя сделать если фон вот этого всего блока прозрачный. То есть сейчас за блоком отображается фон body, а на странице за этим блоком может быть любой контент, так как сам этот блок появляется в модальном окне. Т.е. убрать линию подкладкой я не могу, потому что эту подкладку будет видно.