Генератор ленты CSS
Создайте баннер с изогнутой лентой в углу — диагональный ярлык «Скидка!»/«Новое»/«Рекомендуемое», перекинутый через угол карточки товара, с опциональной тенью сгиба края — как готовый CSS для вставки, с живым предпросмотром.
Ввод
Ярлык, отображаемый на баннере ленты.
Какой угол карточки обвивает лента.
Масштабирует всю ленту — ширина полосы, размер шрифта и смещения масштабируются вместе с ней.
Добавляет пару темнее треугольников ::before/::after, где лента загибается вниз.
Вывод
Ваша лента будет отображена здесь.
Идентичная копия с встроенными стилями (треугольники тени сгиба как обычные <div>, а не ::before/::after) — вставляйте где угодно.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-ribbon-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"ribbonText": "Sale!",
"corner": "top-right",
"ribbonColor": "#e63946",
"textColor": "#ffffff",
"ribbonSize": "140",
"foldShadow": "true"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-ribbon-generator` tool (CSS Ribbon Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-ribbon-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор ленты CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Угловая лента — это диагональный ярлык «Скидка!» или «Новое», перекинутый через угол карточки товара, изображения или плитки цены. Выглядит как лист бумаги, обвитый вокруг края коробки — правильно выполнить этот сгиб в простом CSS сложно. Этот генератор пишет все для вас: выберите угол, цвет и размер, затем скопируйте готовое правило.
Как использовать
- Введите текст ленты — короткие ярлыки («Скидка!», «Новое», «-20%») выглядят лучше всего.
- Выберите угол, через который проходит лента.
- Установите цвет ленты и цвет текста.
- Перетащите размер ленты, пока полоса не будет выглядеть правильно в предпросмотре — все остальное (размер шрифта, высота строки, смещения) масштабируется вместе с ней.
- Включите/отключите тень сгиба края для небольших темнее треугольников, которые делают ленту похожей на сложенную бумагу, а не на плоский повернутый прямоугольник.
- Скопируйте CSS и фрагмент HTML
<div class="ribbon"><span>…</span></div>, или скопируйте/загрузите встроенный в стиль HTML предпросмотра, если вам нужно что-то, что не зависит от отдельной таблицы стилей.
Как это работает
Лента состоит из двух элементов: маленькой квадратной оболочки .ribbon, закрепленной в углу с помощью overflow: hidden, и более широкого .ribbon span, повернутого на 45° внутри. Видна только диагональная часть span, которая попадает в обрезанное окно оболочки, что дает полосе чистый вид с квадратными углами вместо выхода за границы карточки. Тень сгиба края добавляет пару ::before/::after на span — два маленьких треугольника, окрашенные в более темный оттенок цвета ленты, расположенные чуть ниже собственного края span — которые поворачиваются вместе со всем остальным и выглядят как сложенная бумага в двух местах, где полоса выходит из видимого квадрата.
Конфиденциальность
Все работает в вашем браузере — CSS и HTML генерируются локально, ничего не загружается, и инструмент работает в автономном режиме после загрузки страницы.
Почему есть два фрагмента HTML?
Поле HTML — это реальная разметка, предназначенная для использования с блоком CSS через селекторы классов .ribbon/.ribbon span — это то, что вы вставляете в свой проект. Фрагмент предпросмотра — это отдельная копия той же ленты со встроенными стилями (треугольники тени сгиба включены как обычные <div>, а не ::before/::after), которая точно совпадает с тем, что вы видите выше — удобно, если вы хотите поместить ее куда-то без отдельной таблицы стилей, но версия на основе классов — это то, что следует использовать на реальной странице.
Что если мне нужна другая форма, а не лента?
Для простого треугольника (стрелка, указатель подсказки) используйте Генератор треугольника CSS. Для формы с большим количеством точек — звезда, шестиугольник, контур речевого пузыря — Генератор пути обрезки CSS создает произвольные многоугольники. Чтобы поместить тень под карточкой, на которой находится лента, см. Генератор тени блока CSS.