📄 Эффект загнутого угла на чистом CSS
Интересный разбор от Kitty Giraudel.

Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты.

Как это работает?
Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:

Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.

Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.

Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте.

А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.

Оригинал статьи ниже👇

👉 @seniorFront