Как сделать плавное скругление на CSS?

Question

[Александр Новиков]

Есть такой дизайн

Подскажите, как можно реализовать на css такое скругление (кнопка и белая ободок вокруг него)?

Comments

[Сергей Сергей]

вот делает что-то такое
https://www.youtube.com/watch?v=a3rofqqrTBE

Answer 1

[nonconformiste]

Сохранить белую выемку в svg, разместить ее :after секции с абсолютным позиционированием, кнопку сделать как получится, так-же абсолютным позиционированием разместить, у секции должно быть позиционирование относительным.

Answer 2

[Sigma Male]

Я бы сохранил весь фон как картинку (серую часть с выемкой + розовую линию) и задал бы как фоновое изображение родителю кнопки.

Изменено:
Второй вариант: попросить дизайнера что бы он вырезал кусочек фона как на фото (только белую часть), а дальше использовать её как фон для кнопки. Если вместо белого фона там может быть другой цвет, то лучше сохранить картинку как SVG код и дальше делать через псевдо элемент. Для SVG можно будет изменить цвет через CSS.

Comments

[Александр Новиков]

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

[Andrew Ruwz]

Можешь предоставить картинку в большем масштабе

[Александр Новиков]

Andrew Ruwz,
Здесь видно примерно что кроме обводки нужен "обратный радиус"

картинка