Алекс Глебов, например чтобы был динамичный размер с сохранением пропорций.
Я делл подобноее через clip-path. Даже менял пропорции и форму в зависимости от ширины экрана. Даже писал генератор на js простенький чтобы можно было настраивать например радиусы закругления.
я уже натыкалась на эту страничку, я уже пробовала разные способы, макс. что у меня выходило такая же форма как на картинке, но только острая, а когда я пыталась ее скруглить получалась дрисня
Виталий Першин, ну начнём с того, что я кинул как реализуются фигуры, тем самым дал скажем так идею как это реализовать на CSS, если был вопрос как сделать такое? Без привязки к чему-то, то я написал бы SVG или что-то ещё
А размеры фигуры фиксированные или отзывчивые? Если фиксированные, то проще всего взять clip-path:path() и в нем описать контур фигуры SVG-синтаксисом (как d у <path>). Если отзывчиывые, то придется комбинировать методы, например, border-radius для верхних уголков + маску из нескольких градиентов для нижней части (быстрый пример).
Евгений Залецкий, Твой ответ бесполезный в контексте этого вопроса, так как помимо фигуры, тут еще и градиент и такое не делается из двух половинок и прочих хаков, которые описаны в статье
Виталий Першин, ну вопрос стоял так "Как сделать такую фигуру?", а не как полностью повторить это. Снова же, каждый пользователь прочитал так, как считает, так как не описан чёткий вопрос. Что хочу сделать такую фигуру с градиентом или что-то ещё. То есть, какой вопрос такой и ответ.