CSS 星爆 / 销售徽章生成器 — 尖峰太阳爆发形状
从尖峰数量、内径/外径比例和旋转生成多尖峰星爆/太阳爆发 clip-path 形状 — 经典的 "销售印章" 贴纸外观 — 具有居中文本标签和实时预览。
输入
围绕徽章辐射的点数 — 6 个时为温和的太阳爆发，32 个时为密集的星爆。
内径占外径的百分比 — 较低的值产生更长、更锐利的尖峰；较高的值产生短而钝的尖峰。
旋转整个徽章 — 有助于将尖峰尖端精确对齐到您想要的位置。
在预览和 HTML 代码段中显示在徽章顶部中央。
输出
您的星爆徽章将显示在此处。
将其添加到您的样式表，然后将 class="starburst-badge" (具有嵌套的 "starburst-badge__label" span) 应用到您的标记。
与上方预览相匹配的内联样式标记 — 粘贴到任何地方，不需要样式表。
使用此工具的更多方式
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"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-starburst-generator` tool (CSS Starburst / Sale-Badge Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-starburst-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 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是星爆徽章？
星爆 (或太阳爆发) 徽章是用于"50% OFF!"、"NEW!"和"SALE!"价格标签的尖峰贴纸形状 — 一个从中心辐射的多点星，通常在中间有一短行文本。它完全用 CSS 构建，使用 clip-path: polygon(...) 值：一个 x% y% 顶点坐标列表，在围绕整个圆形的长外点和短内凹口之间交替。
该工具根据三个简单的控件 (尖峰数量、尖峰锐利度和旋转) 为您计算该顶点列表，而不是您必须手动编辑的固定形状。为粗壮的复古印章选择 8 个尖峰，或为细致的太阳爆发光线效果选择 24 个，然后在其上方放置标签并复制现成的 CSS。
如何使用该工具
- 设置尖峰数量 — 围绕徽章辐射的点数，从温和的 6 点太阳爆发到密集的 32 点星爆。
- 设置尖峰锐利度 (内径百分比) — 这是内凹口半径占外半径的百分比。较低的值 (接近 10%) 会拉紧凹口以获得长而锐利的尖峰；较高的值 (接近 90%) 会保持短而钝的尖峰。
- 如果您希望特定的尖峰尖端指向除直上方 (12 点钟) 以外的其他位置，请调整旋转。
- 选择徽章大小、徽章填充颜色以及您自己的字体大小和颜色的标签文本。
- 将 CSS (
.starburst-badge类加上.starburst-badge__labelspan) 复制到您的样式表中，或获取下方的 HTML 代码段 — 一个自包含的、内联样式的版本，您可以粘贴到任何地方，无需接触样式表。
形状如何构建
多边形有 2 × 尖峰数量 个顶点。偶数索引顶点位于外半径上 (尖峰尖端，在徽章盒的边缘)；奇数索引顶点位于内半径上 (尖峰之间的凹口)。围绕圆形均匀移动并在两个半径之间交替是产生经典星形/太阳爆发轮廓的原因 — 与 5 点星使用的相同构造，推广到任何尖峰数量。
常见问题
为什么文本不接触尖峰尖端？
标签在徽章的完整 (剪辑前) 盒子内使用 flexbox 居中，并限制为最大宽度 60%，以便在任何尖峰数量时保持远离尖峰之间的凹口 — clip-path 会剪裁可见内容，但不会改变下面的布局框，因此居中仍然完全像在未剪裁的矩形上一样工作。
我可以将其用于销售徽章以外的用途吗？ 是的 — 星爆 clip-path 只是一个形状。将背景图像放在其后面而不是纯色，或完全跳过标签并将其用作装饰口音、"featured"功能区替代品或漫画风格的"BOOM!"标注形状。
如果我需要特定的固定形状而不是程序星爆呢 — 三角形、六边形或经典 10 点星预设？ 使用 CSS Clip-Path Generator，它涵盖圆形、椭圆形、内嵌和常见多边形预设库 (包括固定星)，以及手工可编辑的自定义点列表。
隐私
一切都发生在您的浏览器中。您的尖峰数量、颜色和标签文本永远不会发送到服务器 — CSS 和预览在您调整控件时本地更新。