Как создать такую фигуру?

Question

[webhero]

Мастера стилей, подскажите как создать такую фигуру? Я уже голову сломал, даже чат джипити не понимает

Я думал через clip-path но там нет такой плавности только угловатые формы

Comments

[Сергей delphinpro]

svg

[Сергей delphinpro]

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

[Mikhail Osher]

В идеале, попросить дизайнера сделать векторы и экспортнуть эти фигуры как svg из фигмы или что там у вас.

Answer 1

[Ivan Bogachev]

Я думал через clip-path но там нет такой плавности... даже чат джипити не понимает...

Если уж говорить про clip-path, то там есть clip-source, с помощью которого мы можем поиспользовать clipPath из мира SVG, а в рамках SVG уже можно нарисовать себе любую форму. В разделе синтаксиса и на MDN, и в стандарте, это буквально первый предлагаемый вариант использования clip-path. Не доверяйте вашей чатгопоте. Читайте документацию самостоятельно. Там много интересного.

Comments

[NeoAnderson]

Боже ты ж мой, CSS надо давно деприкейт. Слишком сложная фигня, но не умеет делать даже такие лёгкие формы. Надеюсь изобретут какуюто замену ему и побыстрее. Надо не дать им успеть сделать новый способ выравнивания по центру.

[Zettabyte]

NeoAnderson,

Надо не дать им успеть сделать новый способ выравнивания по центру

Вы так бойко пишете, будто здесь кто-то хоть один старый знает.

[SelenIT3]

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

[Ivan Bogachev]

SelenIT3,

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

Нет. Все зависит от атрибута clipPathUnits.