Возможно ли сделать любую фигуру через css?

Question

[Kokos_228]

Знающие люди, скажите, реально ли сделать такую форму через css как показано на картинке? Если да, то как?

Comments

[Виталий Першин]

svg или clip-path
Как создать такую фигуру?

[Алекс Глебов]

А зачем её делать? Можно из фигмы экспортировать svg

[Вячеслав Шевченко]

Алекс Глебов, например чтобы был динамичный размер с сохранением пропорций.

Я делл подобноее через clip-path. Даже менял пропорции и форму в зависимости от ширины экрана. Даже писал генератор на js простенький чтобы можно было настраивать например радиусы закругления.

Answer 1

[Евгений Залецкий]

Да, можно вот ссылка

Comments

[Виталий Першин]

Ты бы для начала посмотрел как там сложные фигуры сделаны, а потом бы уже сделал выводы.

[Kokos_228]

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

[Евгений Залецкий]

Виталий Першин, ну начнём с того, что я кинул как реализуются фигуры, тем самым дал скажем так идею как это реализовать на CSS, если был вопрос как сделать такое? Без привязки к чему-то, то я написал бы SVG или что-то ещё

[SelenIT3]

А размеры фигуры фиксированные или отзывчивые? Если фиксированные, то проще всего взять clip-path:path() и в нем описать контур фигуры SVG-синтаксисом (как d у <path>). Если отзывчиывые, то придется комбинировать методы, например, border-radius для верхних уголков + маску из нескольких градиентов для нижней части (быстрый пример).

[Виталий Першин]

Евгений Залецкий, Твой ответ бесполезный в контексте этого вопроса, так как помимо фигуры, тут еще и градиент и такое не делается из двух половинок и прочих хаков, которые описаны в статье

[Евгений Залецкий]

Виталий Першин, ну вопрос стоял так "Как сделать такую фигуру?", а не как полностью повторить это. Снова же, каждый пользователь прочитал так, как считает, так как не описан чёткий вопрос. Что хочу сделать такую фигуру с градиентом или что-то ещё. То есть, какой вопрос такой и ответ.

[Виталий Першин]

Евгений Залецкий, Вопрос более чем понятный