Как сделать такой фон хедеру с помощью css?

Question

[danilr]

Довольно сложный header, не понимаю как сделать эту кривую линию снизу, хотелось бы с помощью чистого css.
Пробовал два метода - 1) полностью картинкой, но при изменении размера браузера - все едет. Загружает медленно, пока грузит - все ужасно смотрится.
2) Основную часть черным градиентом, а низ картинкой, background-position: bottom. Аналогично при изменении размера браузера ехало еще ужаснее, подбирать медиа запросами каждые 50 пикселей не варинт.

Есть знатоки css? Как сделать нормально, не хочется картинкой, нужно css. Если картинкой, то подскажите что и как обрезать и какие свойства, чтобы все подстраивалось под ширину экрана.

Answer 1

[Михаил]

делай SVG !

https://codepen.io/mk3mk/pen/KjRXqg

Comments

[danilr]

Мне самому такое написать нереально

[Михаил]

А там писать ничего не надо
Там же написано, что эта фигура НАРИСОВАНА
Ее можно нарисовать в Иллюстраторе или другом векторном редакторе
А потом просто сохранить в свг. И вставить на сайт.
Нарисовать можно все что угодно, и круги, и прямоугольники, волны, облака и т.д.

Answer 2

[Alexander]

Я бы не стал извращаться, а сделал фон картинкой, сжимайте картинки и грузиться они будут нормально, ну и ехать ниче не должно при ресайзе. Можно поиграться с background-position и background-size

Comments

[danilr]

При сжатии картинки с градиентом в png формате получаются четкие крапинки пикселей на черном фоне.

[Alexander]

danilr, чем сжимаете? Я все картинки всегда жму, хоть jpeg хоть png, качество норм, юзаю imagemin для gulp6 степень сжатия там можно подрегулировать.

[danilr]

Alexander, Онлайн сервисами - использовал 3 разных, везде видно жесткие пиксели, думаю все из-за градиентов такие баги

Answer 3

[Владимир Юрченков]

Вы хотите адаптивную? Или при просмотре с мобильных там просто будет бежевая полоса?

Comments

[danilr]

адаптивную, в этом и проблема - если делать ее картинкой или половину часть фоном, часть картинкой

[Владимир Юрченков]

Нет, можно и средствами CSS+HTML обойтись, вариантов много в том числе и с SVG. Выбирайте что нужно, накладывайте. Анимацию если что уберите и все.
https://codepen.io/asufian97/pen/VXMxeM
https://codepen.io/timmcnamara/pen/rrGjNb

+SVG
https://codepen.io/danmindru/pen/pwBGbp
https://codepen.io/inerds/pen/qVYGEz
https://codepen.io/jojomak13/pen/qMrqVJ