配置
文案 HOT DEAL，位置 top-right，红色底白字
CSS
.ribbon { position: absolute; transform: rotate(45deg); ... }设计配色
CSS 角标丝带 - 卡片角标样式工具
可视化生成卡片四角倾斜丝带角标 CSS，可改文案、颜色、偏移、宽度与字号，适合商品卡热卖、缺货等状态标记。
CSS角标丝带
设计配色
CSS 角标丝带
卡片预览
丝带贴角通常需要父容器 `overflow: hidden`，或按偏移使用负边距。
Popular
CSS 片段（卡片需 relative / overflow hidden）
等待调整丝带参数。
使用场景
- 商品卡右上角加促销丝带
- 为缺货或新品状态做角标
- 按设计调整角标偏移避免挡主图
如何使用
- 填写角标文案并选择四角位置
- 调整颜色、偏移、宽度与字号
- 确认父容器 overflow 设置后复制 CSS
示例输入输出
FAQ
为什么丝带边角会被裁切？
倾斜丝带常超出容器。父级需要 position: relative，并按预览开关决定是否 overflow: hidden。
选择器可以自定义吗？
可以。卡片与丝带选择器可自行填写，生成的片段会按你的选择器输出。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS 阴影生成
CSS 阴影生成 - box-shadow 可视化工具
可视化调节偏移、模糊、扩散、颜色、透明度和内阴影，实时预览并生成 box-shadow CSS，适合卡片、按钮和浮层阴影调试。
CSS 阴影 box-shadow
CSS 裁剪路径
CSS 裁剪路径 - clip-path 形状工具
通过预设与关键参数生成 CSS clip-path 裁剪形状并实时预览，适合斜切卡片、徽章、图片裁剪等异形布局与装饰形状。
CSS clip-path 形状
CSS 渐变生成
CSS 渐变生成 - 线性径向锥形工具
可视化生成线性、径向与锥形 CSS 渐变，可调节角度、色标位置并添加多个色标，适合背景、按钮和品牌色过渡设计。
CSS 渐变 背景