Можно ли нарисовать два фона, разделенных кривой, через css?

Question

[kotey]

Доброго времени суток, уважаемые.
Подскажите, возможно ли нарисовать вот такой фон чистым css? Кроссбраузерно?

Градиенты понятно, но вот разделяющую их кривую...

Answer 1

[Максим Тимофеев]

делаем svg. Разделяя две части кривой, потом заливаем обычным градиентом каждую из них.
По поводу кроссбраузерности: caniuse.com/#search=svg
Ну или дедовским способом, картинку на background

https://codepen.io/tedmcdo/pen/PqxKXg - вот кстати интересный пример

Comments

[kotey]

Простите, как то идею не понял. svg - это тот же рисунок ведь.
То есть единственное, что получим - это четкость на любом разрешении. Что хорошо, конечно, но размер...

[Максим Тимофеев]

kotey:
Div с border это тоже рисунок. В отличии от png или jpg это программируемая векторная графика. Его можно вставить в html как код или как ссылку на файл, но второй вариант не дает всех прелестей svg.

1. svg будет занимать минимальный размер, это векторная графика, а тут как раз три точки. png или jpg будут в разы больше.
2. svg можно вставить как код и не иметь лишнего запроса на сервер
3. svg можно красить из css
4. svg можно создать программно в js и т.д.

подробнее тут: https://www.w3schools.com/graphics/svg_intro.asp
Что бы ручками не писать svg код, можно использовать бесплатное ПО Inkscape

Answer 2

[Капитан Какао]

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

Пример на SVG с пропорциональным изменением размера:
https://jsfiddle.net/t6pgwhsr/

Пример на SVG с изменением размера только по ширине (адаптив):
https://jsfiddle.net/t6pgwhsr/2/

Второй вариант по моему идеален, такого вы точно не достигните чистым CSS.

Comments

[kotey]

Вау! Вот этого я не знал. А нет ли у Вас под рукой статьи, где этот метод на доступном нубу уровне разложен? (что, как почему, какие плюсы и минусы).
Очень интересно.

[Капитан Какао]

kotey: плюсы по моему очевдны)
Почитать про SVG можете по запросу в гугл - "SVG в HTML" или что-то типа того.

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

Как управляться с иллюстратором писал тут:
https://toster.ru/answer?answer_id=1022114#comment...

И если ответ вам помог, пожалуйста выбирайте его как решение)

[kotey]

Rad Cor: А, вон оно как, код получаем через Иллюстратор. Хитро =)

[Капитан Какао]

kotey: да. + Можно этот код запихнуть в текстовый документ с расширением svg
image.svg и использовать как картинку вставляя в тег img или в фон блока:

<img src="image.svg" />

[kotey]

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

[Капитан Какао]

kotey: ну просто там отступ между двумя слоями в 1 пиксель, не ровно нарисовал, это всего лишь пример а не рабочий вариант.

[kotey]

Ну, хотелось бы на CSS, но если не выйдет, будем ваять SVG, запихивать в файл и подключать.

Answer 3

[Nikcet]

Как вариант: разбить фон на 2 элемента, прорисовать их в фотошопе(pixel perfect, само собой) с прозрачным фоном, и в стилях обозначив position: absolute, наложить друг на друга.

А в чистом CSS как такое реализовать лично у меня нет даже намека на идеи.

Хотя можно еще попробовать через Canvas.

Comments

[kotey]

Да в ФШ можно сразу картинку нарисовать и не заморачиваться наложением. =(

Answer 4

[Александр]

Если без svg, то можно посмотреть в сторону clip-path, но с IE и EDGE будут проблемы.