Генератор Starburst / Этикетки продажи CSS — Колючая форма солнечных лучей
Создайте форму clip-path starburst/sunburst с множеством шипов — классический вид стикера-печати продажи — из количества шипов, соотношения внутреннего/внешнего радиуса и поворота, с центрированной текстовой меткой и живым предпросмотром.
Ввод
Сколько точек излучается вокруг значка — мягкий sunburst при 6, плотный starburst при 32.
Внутренний радиус в процентах от внешнего радиуса — меньшие значения дают длинные острые шипы; большие значения делают их короткими и тупыми.
Поворачивает весь значок — полезно для выравнивания кончика шипа ровно туда, где вы хотите.
Отображается в центре значка в предпросмотре и HTML-фрагменте.
Вывод
Ваш значок starburst появится здесь.
Добавьте это в вашу таблицу стилей, затем примените class="starburst-badge" (с вложенным span "starburst-badge__label") к вашей разметке.
Встроенная разметка, соответствующая предпросмотру выше — вставьте где угодно, таблица стилей не требуется.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-starburst-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"spikeCount": "12",
"innerRadiusRatio": "45",
"rotation": "0",
"badgeSize": "220",
"badgeColor": "#ef4444",
"labelText": "50% OFF",
"labelFontSize": "28",
"labelTextColor": "#ffffff"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-starburst-generator` tool (CSS Starburst / Sale-Badge Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-starburst-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор Starburst / Этикетки продажи 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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое значок starburst?
Значок starburst (или sunburst) — это колючая наклейка, используемая на ценниках "50% OFF!", "NEW!" и "SALE!" — множество лучей, излучаемых из центра, обычно с короткой строкой текста в середине. Он полностью построен в CSS с использованием значения clip-path: polygon(...): список координат вершин x% y%, чередующихся между длинной внешней точкой и коротким внутренним зубцом по всему кругу.
Этот инструмент вычисляет список вершин для вас из трех простых элементов управления — количество шипов, острота шипа и поворот — вместо фиксированной формы, которую вам пришлось бы редактировать вручную. Выберите 8 шипов для плотной ретро-печати или 24 для тонкого эффекта солнечных лучей, затем поместите метку сверху и скопируйте готовый CSS.
Как пользоваться этим инструментом
- Установите Количество шипов — сколько точек излучается вокруг значка, от мягкого 6-лучевого солнечного диска до плотного 32-точечного starburst.
- Установите Острота шипа (процент внутреннего радиуса) — это внутренний радиус зубца в процентах от внешнего радиуса. Меньшие значения (ближе к 10%) стягивают зубцы туго для длинных острых шипов; большие значения (ближе к 90%) делают их короткими и тупыми.
- Отрегулируйте Поворот, если вы хотите, чтобы кончик определенного шипа указывал в стороне от вертикали вверх (12 часов).
- Выберите Размер значка, Цвет заполнения значка и Текст метки с собственным размером шрифта и цветом.
- Скопируйте CSS (класс
.starburst-badgeплюс span.starburst-badge__label) в вашу таблицу стилей или возьмите фрагмент HTML ниже — автономную версию с встроенным стилем, которую вы можете вставить куда угодно без необходимости трогать таблицу стилей.
Как строится форма
Многоугольник имеет 2 × количество шипов вершин. Вершины с четными индексами находятся на внешнем радиусе (концы шипов, на краю блока значка); вершины с нечетными индексами находятся на внутреннем радиусе (зубцы между шипами). Прохождение равномерно вокруг окружности и чередование между двумя радиусами — вот что создает классический силуэт звезды/солнечного диска — то же построение, которое использует 5-лучевая звезда, обобщенное на любое количество шипов.
FAQ
Почему текст не касается концов шипов?
Метка центрируется с помощью flexbox внутри полного блока значка (до обрезки) и ограничена максимальной шириной 60%, чтобы оставаться в стороне от зубцов между шипами при любом количестве шипов — clip-path обрезает видимое, но не изменяет блок макета под ним, поэтому центрирование работает точно так же, как на необрезанном прямоугольнике.
Могу ли я использовать это для чего-то, кроме значка продажи? Да — clip-path starburst — это просто форма. Поместите фоновое изображение позади него вместо плоского цвета или полностью пропустите метку и используйте его как декоративный акцент, замену ленты "featured" или форму выноски в стиле комикса "BOOM!".
Что если мне нужна определенная фиксированная форма вместо процедурного starburst — треугольник, шестиугольник или классическая 10-лучевая звезда? Используйте CSS Clip-Path Generator, который охватывает круги, эллипсы, вставки и библиотеку распространенных предустановок многоугольников (включая фиксированную звезду), а также отредактированный вручную список пользовательских точек.
Конфиденциальность
Все происходит в вашем браузере. Количество шипов, цвета и текст метки никогда не отправляются на сервер — CSS и предпросмотр обновляются локально по мере регулировки элементов управления.