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