用 transform: rotate(45deg) 实现旋转标签需配合父容器 position: relative、子元素 position: absolute 定位到右上角，并加 overflow: hidden 裁剪溢出，同时注意 pointer-events 和热区匹配问题。
直接用 transform: rotate(45deg) 就能实现，但必须配合父容器的 position: relative 和子元素的 position: absolute，否则标签会脱离文档流或旋转中心错位。
为什么 rotate(45deg) 后标签总跑出卡片外？
因为 rotate() 是绕元素自身中心点旋转，而促销标签通常要挂在右上角——视觉上是“悬挂”，不是“原地打转”。不控制定位，旋转后四个角坐标全变，极易溢出。
- 父容器（如商品卡片）必须设
position: relative，作为绝对定位的参考系 - 标签元素设
position: absolute，再用top、right精确定位到右上角区域 - 加
overflow: hidden到父容器，自动裁掉旋转后伸出的尖角部分 - 别依赖
margin往右上推——旋转后 margin 作用的是原始矩形，位置不可控
倾斜后点击不到、hover 失效怎么办？
这是最常被忽略的坑：transform 不影响事件命中盒，浏览器仍按未旋转前的矩形判定鼠标是否悬停或点击。用户看着标签在右上角，实际得对着它“原本该在的位置”操作。
- 给标签加
pointer-events: none，把事件透给下层卡片（适合纯展示型角标） - 如果标签本身要响应点击（比如跳转活动页），就得用
clip-path或包裹一层透明容器来扩展热区 - 测试时用浏览器开发者工具的“Toggle element screenshot”功能，看蓝色高亮框是否覆盖你期望的视觉区域
红底白字“七折”标签的最小可用样式组合
不用复杂动画，只求稳定落地。以下是最小可靠配置：
.product-card {
position: relative;
overflow: hidden;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
background: #e2231a;
color: white;
font-size: 12px;
padding: 2px 8px;
transform: rotate(45deg);
white-space: nowrap;
}
-
top/right建议用固定像素值（如8px），避免百分比在不同尺寸卡片中偏移 - 字体大小别超过
14px，否则旋转后文字太宽，容易撑破卡片边界 - 务必加
white-space: nowrap，防止“七折”被断成两行，旋转后更难读 - 颜色要满足 WCAG AA 对比度要求：红底（#e2231a）配白字刚好达标，换成浅红就可能过不了审
真正麻烦的从来不是那行 rotate(45deg)，而是它和定位、事件、可访问性、多端适配搅在一起时，没人告诉你哪一步悄悄破坏了其他链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
