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

Question

[serNoName]

В фигме пишет просто бордер-радиус 20пх.
Таких блоков в макете много, вставлять как картинку - не вариант.

Answer 1

[Дмитрий]

Можно сделать комбинацией :before и :after

Сначала кладете черный квадрат как before внутрь блока, он скроет часть зеленых бордеров. Поверх кладете after блок со своим бордером и поворачиваете after блок на 45 градусов.

Comments

[serNoName]

Спасибо!!

[Дмитрий Орлов]

Вот бы научится понимать такие тонкости

Answer 2

[serNoName]

Помогли эти свойства:

clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%);
border-radius: 20px 20px 50px 20px;

+ :before

Answer 3

[от это да]

нарисуй svg на js
или разбей фон на три части вставь в них svg

или объясни неграмотному дизайнеру что так нельзя рисовать