如何使用TailwindCSS实现右下角斜切角边框效果

你原有的双层嵌套实现逻辑完全可以复用，只需要调整边框透明方向和斜角遮盖块的位置即可，不需要重构结构：

• 保留外层容器+内层容器的基础嵌套结构，外层容器原有尺寸、overflow: hidden、相对定位属性不需要改动
• 内层容器边框规则调整：将border-top、border-left设置为透明，仅保留border-right、border-bottom为需要的实色边框
• 斜切遮盖块调整：把原本放在左上角的直角遮盖块移到容器右下角，尺寸和边框宽度保持一致，颜色和外层容器背景色相同，通过位移刚好覆盖右下角的边框直角，形成自然的斜切效果

核心实现代码参考：

<div class="relative w-[300px] overflow-hidden bg-gray-50 p-1">
  <!-- 内层带边框内容容器 -->
  <div class="border-2 border-transparent border-r-slate-800 border-b-slate-800 p-6">
    <p>这里是容器内的业务内容</p>
    <p>右下角会呈现和左上角效果一致的斜切边框</p>
  </div>
  <!-- 右下角斜切遮盖块 -->
  <div class="absolute bottom-0 right-0 h-2 w-2 translate-x-1/2 translate-y-1/2 rotate-45 bg-gray-50"></div>
</div>

如果你需要调整边框宽度、斜角大小，只需要同步修改遮盖块的宽高数值，和边框宽度保持1:1对应即可，斜切角度会自动保持45度。

内容的提问来源于stack exchange，提问作者Nick Jmakin