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"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-ribbon-generator` tool (CSS Ribbon Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<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 和
<div class="ribbon"><span>…</span></div>HTML 代码片段，或复制/下载预览的内联样式 HTML（如果您想要不依赖单独样式表的东西）。
工作原理
缎带由两个元素组成：一个小的正方形 .ribbon 包装器，用 overflow: hidden 固定到角落，以及一个在其内部旋转 45° 的更宽的 .ribbon span。只有落在包装器剪裁窗口内的 span 的对角切片是可见的，这就是为什么条带具有清洁的方角外观，而不是溢出卡片。折边阴影在 span 上添加一对 ::before/::after — 两个小三角形，颜色是缎带颜色的深色阴影，位于 span 自身边缘的正下方 — 它们与其他所有内容一起旋转，看起来像纸在条带从可见正方形退出的两个点处折叠。
隐私
所有处理都在您的浏览器中进行 — CSS 和 HTML 是本地生成的，不会上传任何内容，工具在页面加载后可以离线工作。
为什么有两个 HTML 代码片段?
HTML 字段是真实的标记，旨在通过 .ribbon/.ribbon span 类选择器与 CSS 块配对 — 这是您粘贴到项目中的内容。预览代码片段是相同缎带的单独完全内联样式副本（折边三角形作为普通 <div> 而不是 ::before/::after 包含），完全匹配您上面看到的内容 — 如果您想在没有单独样式表的某处放置它很方便，但基于类的版本是应该在实际页面中使用的版本。
如果我需要不同的形状，不是缎带？
对于简单三角形（箭头、工具提示指针），使用 CSS 三角形生成器。对于具有更多点的形状 — 星形、六边形、语音气泡轮廓 — CSS 裁剪路径生成器 创建任意多边形。要在缎带所在的卡片下放置阴影，请参见 CSS 盒阴影生成器。