Как сверстать такую волну?

Question

[szQocks]

Красный оверлей якобы с бордер , кто-нибудь в курсе как сверстать?

Comments

[Антон]

хорошо в моей компании дизайнер бестолковый

Answer 1

[hzzzzl]

на очень скорую руку и совсем не адаптивно



svg online: https://editor.method.ac/

Comments

[szQocks]

Спасибо братан, я думал SVG - всё в ручную писать эти циферки , оказывается нет, тогда почему бы и не изучить :D , честно признаюсь в серьёз я не гулил SVG, так пару статей прочитал о том о сем и подумал что циферки то в ручную писать надо , сидеть и гадать , оказывается походу нет.

[art style]

szQocks, да ты сверхразум

Answer 2

[Имя Фамилия]

Оверлей - svg

Comments

[szQocks]

а кроме svg этот оверлей не как не сделать ?

[dollar]

szQocks, если смущает svg, используйте png :D

[Имя Фамилия]

szQocks, Такую svg и самому можно нарисовать. Минут за 5-10. Еще в теории можно поиграться с clip-path(не рекомендую)

[szQocks]

dollar, меня в svg смущают цифры с буквами которые привязаны к каким-либо атрибутам и идут друг за другом через запятые и их там штук по 40 :D

К примеру)
polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/>
path d="M 10,10 L 250,250 30,100 150, 50"

и т.д

[szQocks]

Имя Фамилия, за сколько можно изучить svg ? 20 практических часов хватит для изучения svg?)

[dollar]

szQocks, ну а png - вообще бинарник)
Вы когда создаёте png, вручную его собираете по байтам, и понимаете алгоритм сжатия?

[Имя Фамилия]

szQocks, Что-бы такую волну нарисовать, около пары часов хватит. Есть целые гайды как это делать погугли svg wave
P.s пока сам гуглил, нашел сайт, генерирует волны svg https://getwaves.io/

[szQocks]

dollar, не я не в курсах всего этого , картинки не создавал не когда свои) ну и уж явно алгоритмы сжатия картинок не изучал. Знаю что много человек такую верстку через png решают , но это такое себе ведь решение, самое костыльное и на самый край мне кажется.

[szQocks]

Имя Фамилия, Понял, спасибо за инфу, буду учить!

Answer 3

[Владимир Коротенко]

Я бы потыкал в исходник.

Comments

[szQocks]

Исходников нет.

[Владимир Коротенко]

https://web.dev/css-masking/

и похоже что ваше
https://jaketrent.com/post/create-bezier-curve-cli...