Как сверстать шапку такой формы?

Question

[artem7299]

С новым годом всех!
Народ, помогите сверстать шапку. Завис на нижней части, голову сломал уже, как сверстать, чтобы она имела такую форму внизу?



Пробовал через псевдоэлементы картинками, но там с адаптивностью косяки будут, через бордер пробовал по всякому, может кто подкинет идеи или сверстает? Я так думаю, решение на поверхности, только найти его никак не могу.
Заранее, благодарю!

Answer 1

[Ankhena]

Без SVG, картинок и псевдоэлементов,
CSS only

Comments

[Максим]

а градиент ?

[Ankhena]

Максим Ленский, не поняла вопроса?
И с новым годом )))

[Сергей Горячев]

Ankhena, градиент на картину)

[Максим]

Ankhena, С Новым годом ...прошу прощения за наезд ... но это просто проф интерес ...насколько способен градиент и сможет ли он конкурировать с svg

[Ankhena]

Максим Ленский, не встречала аргументов против градиентов, кроме неумения с ними работать. Впрочем, про svg аналогично. В случае спора градиента и svg, чаще бывает, что градиентом короче. В некоторых случаях у svg получается выше четкость.
В моих приоритетах, если можно сделать на css (градиенты, тени, границы и т. д. ), делаю на css, если никак или уж очень громоздко, то тогда svg.

[Максим]

Ankhena, я лично css больше люблю чем svg просто есть случаи когда на css не возможно реализовать ...это как раз тот случай

[Сергей Горячев]

Максим Ленский, Ankhena, мы отклонились от темы) Как в таком варианте сделать картинку большую с градиентом) Как представлено на скрине. Естественно же, что оранжево-синий градиент не сливался с картинкой сразу в фотошопе.

[Максим]

Сергей Горячев, в моём ответе вроде бы я так и сделал ...разве нет ?

[Ankhena]

Сергей Горячев, и я не поняла чем мой вариант не устраивает? Не хватает наложения оранжево-синего? Вроде с этим не должно быть сложностей?

[Ankhena]

Максим Ленский, Максим, что именно не сделать?

[Максим]

Ankhena, так то так но так получается кривое скругление

[Ankhena]

Максим Ленский, в процентики проиграть, на 99 поменять, например.

[Максим]

Ankhena, я же о том и говорил - что svg ни чего не надо менять - как нарисовал так и будет

[Ankhena]

Максим Ленский, На моем мониторе/видяшке и с градиентом и с SVG одинаково видны зазубринки сглаживания.
Да и хорошо, что есть разные варианты решений. Еще border-radius для псевдо в запасе остается.

[Максим]

Ankhena, в общем вместо тысячи слов

[Ankhena]

Максим Ленский, Максим, вы меня расстраиваете (( У меня в примере высота блока стоит фиксированная и градиента тоже, а ширина резиновая. Конечно, при таком раскладе пропорциональность нарушается.
Я ведь собиралась только быстро показать принцип получения скругления, а не сделать всю верстку.
Будет пропорциональная высота блока и высота эллипса в процентах и все будет ок, ровно также как в svg.

[Максим]

Ankhena, лан фигня это всё ... css не умеет это ... извените ....я не спорил а просто размышлял ... хотел просто ради интереса увидеть 100% рабочее решение на css и адаптивное
- что бы ни что не куда не уезжало ... но так же как и в сети я не увидел ... в svg проще это делать ...

[Ankhena]

Максим Ленский,
Адаптивный


С border-radius для псевдоэлемента - аналогично. У border-radius'а, наверное, получше сглаживание будет.

[Ankhena]

Максим Ленский, это старый пример на основе border-radius (изначально не мой, а кажется Сергея dpr), только внутренний div нужно заменить на псевдо


Аналогично, задать блоку пропорции и пропорциональные же размеры для псевдо.

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

[Максим]

Ankhena, а так то дааа.... svg проигрывает тогда здесь ... хм жесть

[Максим]

Ankhena, но косяк увидел только в том что в маленьком разрешении скругление очень большое ... но всё равно зачётно

https://cloud.mail.ru/public/Ky79/p2XKA2amr

[Ankhena]

Максим Ленский,

но косяк увидел только в том что в маленьком разрешении скругление очень большое ... но всё равно зачётно

не поняла как это вышло, но в гифке старый размер овала 120% 100px, а меня в песочнице он уже исправлен на проценты 120% 25%

[Максим]

Ankhena, ну вот так ваще жесть : https://jsfiddle.net/20j16fu4/

[Максим]

Ankhena, Oh no ...Thanks

Answer 2

[Юрий Янин]

Способ даже не один.
Ты можешь сделать отдельный блок с белой картинкой данной формы которая будет накладываться поверх. Не псевдоклассом, а отдельно. И не задавать ей ограничение по ширине, тогда с адаптивом не будет косяка.
Так-же ты можешь использовать svg.
Про js вообще молчу. Боюсь тут немного опыта не хватит раз такие вопросы возникают.

Comments

[Сергей Горячев]

Ты можешь сделать отдельный блок с белой картинкой данной формы которая будет накладываться поверх. Не псевдоклассом, а отдельно. И не задавать ей ограничение по ширине, тогда с адаптивом не будет косяка.

Тут даже блок не нужен. Тупо белую картинку абсолютным позиционированием прижатой к bottom.

[Ankhena]

Не псевдоклассом, а отдельно.

Вот отдельно точно не надо. Либо псевдоэлементом либо множественным фоном.
И вообще не картинкой, а радиальным градиентом, эллипсом.

Answer 3

[Максим]

Увидел я эту деталь с градиентом : https://codepen.io/topicstarter/pen/BvmELK доделал

Answer 4

[lukoie]

Вот тут описываются все способы решений:
https://css-tricks.com/creating-non-rectangular-he...

Answer 5

[Vladimir Bill]

Посмотри в сторону свойства clip-path