📄 Эффект загнутого угла на чистом CSS
Интересный разбор от Kitty Giraudel.
Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты.
Как это работает?
Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:
Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.
Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.
Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте.
А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.
Оригинал статьи ниже👇
👉 @seniorFront
5
3
2
2April 2, 2026 8K 26
