С помощью каких css трансформаций можно сделать такой блок?

Question

[Егор Лавренов]

Есть вот такой блок, подскажите, как его сделать с помощью css

Comments

[Ankhena]

Это не трансформации. Это наложение фона радиальным градиентом либо псевдоэлементов.
Отсюда возьмите: Как пофиксить подобный бордер?

Answer 1

[Александр Таратин]

В svg нарисуйте и растяните на всю ширину.
Сам svg вставляйте в html напрямую а не через img.
Будет наиболее кроссбраузерно.

Comments

[Егор Лавренов]

А если у меня есть такой же блок, но фон не белый, как мне в точности повторить его в svg?
Перерисовывать что ли?

[Александр Таратин]

Егор Лавренов,
Не совсем понимаю вас. Если нужно вписать растровую картинку в сложный контур, то
css.yoksel.ru/css-and-svg-masks

Но в вашем случае это не обязательно. Верхний цветной экран и нижний синий просто достаточно подложить под белую среднюю часть.

Answer 2

[Артём Ведищев]

Попробуй SVG фон

Answer 3

[Ivan Bogachev]

как его сделать с помощью css

Если SVG вас по какой-то причине не устраивает, то есть простой вариант и на чистом CSS.

Comments

[Егор Лавренов]

А можно ссылку на какой-то источник, чтобы я понял как это сделать с помощью svg?