使用 clip-path 时，当父级元素的 outline 样式发生变化时（在 :hover 或动态 class 切换时），clip-path 失效了

✅ 解决方案建议

✅ 1. 将 clip-path 提升为独立的渲染层

尝试为 .ribbon 添加 transform: translateZ(0) 或 will-change: clip-path，强制浏览器为其创建新的渲染层。

.ribbon {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: translateZ(0);
  will-change: clip-path;
}

✅ 2. 避免在父容器中频繁重绘 outline

如果你只是想让点击或悬停时“高亮”当前模板项，可以考虑用 box-shadow 替代 outline，因为它不会影响子元素的渲染流程。