Как сделать такой CSS эффект?

Question

[Кирилл]

Див с разными габаритами и с тенью и вот такой обводкой, пробовал через png и svg, но приличного результата нет, так как в диве будет текст и filter использовать нельзя, есть родитель, before, after

Answer 1

[Митя ТоДаСё]

вот вы мне скажите, вас поиском пользоваться не учили, вот два примера кода сходу нагуглил по запросу - zigzag border css shadow
c тенью, изменяемый в размере, зигзаг только снизу


без тени, изменяемый в размере, зигзаг сверху и снизу

Comments

[Rustam Bainazarov]

Это не решает вопрос внутренней и внешней теней, о которых и спрашивает автор вопроса. Плюс, у блока должны быть разные габариты.

[Митя ТоДаСё]

SmthTo, а так решает?

[Rustam Bainazarov]

Митя ТоДаСё, а фиг его знает, это уже автору вопрос, лучше добавьте ссылку на этот сниппет в ответ, чтобы он посмотрел.

[Митя ТоДаСё]

SmthTo,
1. ему приходят уведомления - это точно, Карл!
2. я думаю, если нужно, увидит, если нет - значит так нужно :)

[Rustam Bainazarov]

Митя ТоДаСё, я больше про других людей думаю, которые не будут читать комментарии, а захотят узнать ответ.

[Митя ТоДаСё]

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

[Rustam Bainazarov]

Митя ТоДаСё, мне больше нравятся вопросы без единой строки кода или ссылки на ресурс. И вопросом по типу: «На разрешении over 9000 px там что-то распадается, помогите».

[Кирилл]

Митя ТоДаСё, Тоже пробовал этот самый вариант, да, он работает, но при изменении дива может не совпасть, например на белом фоне, если сделать так, как сделано в примере на родителе, то левый и правый border тоже будет зиг загом, если на before и after то не совпадет. Возможно делать через js?
htt*ps://prnt.sc/lyqxz9

и еще момент, с тенью, не уверен что будет точно если пытаться подогнать тень слева и справа для левого и правого border-a, если через мульти box-shadow для родителя

[Митя ТоДаСё]

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

[Кирилл]

Митя ТоДаСё, да причем тут загадки, на фото тот визуальный эффект, который я не смог сделать, его я и прислал, если бы был код, зачем бы я задавал вопрос?)