помогите пожалуйста сделать такие фигуры через css

получится ли это реализовать через border-radius? две фигуры


Ответы (1 шт):

Автор решения: De.Minov

Я бы советовал использовать для этого SVG.

Если макет в Figma, то вы просто экспортируете эти фигуры в SVG.
Если картинка, то через Adobe Illustrator, то вот как из растрового сделать векторный.

Открываете картинку в AI и выбираете в верхнем меню Окно > Трассировка изображения

введите сюда описание изображения

Далее в открывшимся окне первым делом включаете "предварительный просмотр" и выбираете настройки подходящие под изображение, для данного изображения подойдут эти

введите сюда описание изображения

После того, как удостоверились в том, что настройки подходят, выключаете "предварительный просмотр" и жмёте кнопку "трассировка".

После этого в верхнем меню выбираете Объект > Разобрать...

введите сюда описание изображения

В открывшимся окне выбираем эти настройки

введите сюда описание изображения

И жмём "ок".

После этого выбираем самый верхний слой и в верхнем меню Объект > Разгруппировать (или хоткей Ctrl+Shift+G) несколько раз, чтобы все контуры были в слое.

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

И теперь мы должны экспортировать наши фигуры в SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 685.34 275.32">
    <path fill="#d96467" d="M218 270.45a184.09 184.09 0 0 1-84.71-.14c-22.86-6.23-44.21-15.69-63.08-30.19-37.58-28.9-60.38-66.77-68-113.59C-3.08 94 1.39 62.54 13.13 32a86.84 86.84 0 0 1 7.36-14.72C29.41 2.93 42.42-1.84 58.62.61c17.08 2.58 33.13 8.74 49.22 14.57 39.79 14.4 81.06 22.3 122.65 29.05 25.12 4.08 50.22 8.49 74.1 17.8a93.69 93.69 0 0 1 24.78 13.8c17.73 14.17 23.4 33.26 19.19 54.54-14.14 71.42-57.18 117.09-126.3 138.74Z" />
    <path fill="#e46366" d="M568.29 270.34c-11.93 3.67-24 2.48-36.07 1a1 1 0 0 0-.92-.12l-4-.88c-37.14-8.91-65-30-82.06-64.23-35.26-70.79 9.24-156.7 87.36-169.25 9.42-1.51 18.87-1.5 28.35-1.78 20.29-.58 40.39-3.57 60.62-5a170.38 170.38 0 0 1 27.35-.08c22.87 2 35.61 15.32 36.35 38.32.77 23.54-5.18 45.82-13 67.68-12.49 35.06-29.62 67.61-53.71 96.21-13.84 16.46-29.56 30.62-50.27 38.13Z" />
</svg>

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

→ Ссылка