Pos
Top Right
Offset
rotate(45deg) top -x;
design / 可用工具
商城右上角 HOT 缎带伪 3D 转换盒
电商高频组件：给你的卡片左上角或者右上角加一个红底白字的倾斜挂饰。本工具通过计算绝对定位与 `rotate` 交织算出无需图片的一比一角标。
DesignCSSFrontend
视觉与图形
CSS 浮动卡片丝带
Card Demo Box
The ribbon wrapping around the corner requires `overflow:hidden` context usually or negative margins depending on the math.
Popular
CSS Drop-in Style (Card needs relative/overflow hidden)
使用场景
- 产品提了需求，要在所有的缺货商品封面卡上打一个侧面的缺货横幅
如何使用
- 1. 调节折角偏移量防止挡住过多主视图，获取到最精准的绝对定位加计算了角度的代码块，必须配合相对父节点使用。
示例输入输出
FAQ
为什么丝带突出去一块？
为了在边角完美融合，通常需要你在父节点强设 `overflow: hidden` 以裁掉毛边。