右上角“塌陷”因border内切导致，应抽离元素用absolute定位+border-bottom/border-left外撑；伪元素transition需用opacity+transform而非display；clip-path直观但safari旧版兼容差。
折角效果用 border 实现时，为什么右上角总“塌”了一块？
因为 border 的斜角本质是两条边交汇形成的对角线，而右上角缺角需要的是「外切」而非「内切」——直接用 border-top 和 border-right 会把折角画在容器内部，视觉上像被挖掉一块，实际是边框交点位置错了。
- 正确做法是把折角元素单独抽出来，用
position: absolute定位到父容器右上角，再通过border-bottom+border-left向外撑出三角形 - 别依赖
box-sizing: border-box对折角尺寸的控制，它的计算不包含伪元素生成的border形态 - 如果父容器有
overflow: hidden，折角会被裁掉——必须确保父级overflow为visible或预留足够空间
::after 伪元素做折角，transition 为啥不生效？
伪元素默认不可动画，transition 只对可计算的 css 属性起作用，而 border 宽度、颜色能过渡，但「从无到有」的显示/隐藏（比如 opacity 或 visibility）必须配合 transform 或 clip-path 才能平滑过渡。
- 不要写
transition: all 0.3s，它对display无效，且会干扰content切换（伪元素没content就不渲染） - 推荐用
opacity+transform: scale()组合：初始设opacity: 0; transform: scale(0.8)，hover 时改为1和1 - 注意
transition必须写在伪元素本身上，不是父选择器；否则浏览器不识别动画上下文
用 clip-path 替代 border 折角，兼容性怎么取舍？
clip-path 写法更直观（比如 polygon(0 0, 100% 0, 100% 100%, 0 100%) 去掉右上小三角），但 Safari 旧版本（clip-path 的 inset() 和百分比坐标支持不稳定，容易错位。
- 如果只支持现代浏览器，用
clip-path: inset(0 0 0 10px round 0 10px 0 0)最干净，圆角折角一步到位 - 要兼容 Chrome 80+/Firefox 70+，就得降级回
border+transform: rotate()拼接，但旋转中心点必须设为transform-origin: top right -
clip-path无法和border-radius叠加生效——想让折角带圆弧，只能用inset()的round参数，不能混用
hover 触发折角展开，鼠标移入移出频繁抖动怎么办？
本质是触发区域太小，鼠标从内容区移向折角时经过空白间隙，导致状态反复切换。这不是过渡问题，是热区设计缺陷。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
padding-right和padding-top，扩大响应范围，再用负margin把内容拉回原位，避免布局偏移 - 折角元素自身加
pointer-events: none，让它不拦截鼠标事件；真正监听 hover 的是父容器 - 如果折角含文字或图标，需额外包裹一层
pointer-events: auto的子元素，否则交互失效
过渡的复杂点不在形态变化本身，而在「触发时机」和「渲染层级」的隐式耦合——比如 z-index 没显式声明时，伪元素可能被父级 overflow 截断，或者 transform 引发新层叠上下文导致遮挡。这些细节不报错，但效果消失得毫无征兆。