Практика: карточка с круглым вырезом — начало

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

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

Требования к вырезу:

• Карточка может менять размеры — быть резиновой по ширине или растягиваться по высоте при добавлении контента.
• Под карточкой может быть неоднородный фон: градиент или фотография, которая должна «просвечивать» в вырезе.

Раньше такие эффекты делали с помощью дополнительных элементов, псевдоэлементов или сложных комбинаций теней. Это работало, но кода получалось много, а изменить что-то в дизайне было сложно.

Мы используем современный подход — создадим вырез с помощью CSS-функции radial-gradient().