Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с
flex-grow и radial-gradient. И всё ломается, если карточке задать градиентный фон — состыковать части принципиально невозможно.Одно свойство
mask-image с тем же radial-gradient решает задачу без единой обёртки. Карточка остаётся цельной — и корректно тянется, и принимает любой фон. В статье собираем оба варианта пошагово и сравниваем.Демонстрация: https://htmlacademy.ru/demos/235
Читать статью → https://habr.com/ru/articles/993310/