Угловая лента и значок на CSS (ribbon и badge)
Выберите стиль, текст и угол. Лента делается одним элементом и подстраивается под размер текста.
Как пользоваться«Хит продаж» в углу карточки
Доступно на: 
Угловая лента и значок на CSS (ribbon и badge): для чего нужен
Лента в углу выделяет самый популярный тариф, новый товар или акцию, не меняя остальную карточку. Выберите диагональную ленту, круглый значок, ярлык или загнутую полосу, а также текст, угол, цвета и размер.
Код включает пример карточки и CSS ленты, сделанной одним элементом: в диагональном варианте карточка обрезает лишнее с помощью overflow hidden. Предпросмотр сразу показывает результат, а страница объясняет, когда использовать каждый стиль.
Как пользоваться
- Выберите стиль и текст.
- Настройте угол, цвета и размер.
- Скопируйте код.
Когда использовать
- Выделенный тариф в таблице цен.
- Новый товар или товар по акции.
- Значок скидки на фото.
Частые вопросы
Как лента обрезается в углу?
Карточке задаются overflow: hidden и position: relative.
Читают ли ленту программы чтения с экрана?
Читают, потому что текст находится в HTML. Если значок лишь повторяет то, что уже есть в карточке, можно пометить ленту атрибутом aria-hidden, чтобы она не озвучивалась дважды.
Какой стиль выбрать?
Диагональная лента сильнее привлекает внимание и подходит для выделенных тарифов. Круглый значок хорош для скидок («−20%») на фото товаров, а ярлык самый ненавязчивый, подходит для списков с множеством позиций.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.