问题核心分析 #

你遇到的本质问题是：通过clip-path实现直角三角形的等距内边框时，因几何公式错误导致内三角三条边与外三角的边距不一致。要解决这个问题，需要从平面几何的平行直线距离原理出发，推导内三角顶点的准确坐标。

几何公式推导（针对直角等腰三角） #

我们以你代码中的左上角直角等腰三角形（clip-path: polygon(0% 0%,100% 0%,0% 100%)）为例，外三角的两条直角边长度均为L，要求内三角与外三角的每条边距离均为d（即你要的“边框宽度”）：

1. 外三角的三条边方程

以左上角为原点(0,0)建立坐标系：

• 顶部边：y=0（从(0,0)到(L,0)）
• 左侧边：x=0（从(0,0)到(0,L)）
• 斜边：x + y = L（从(L,0)到(0,L)）

2. 内三角的顶点计算

内三角的每条边需与外三角对应边平行且距离为d：

• 内三角顶部边：y=d（与外三角顶部边距离为d）
• 内三角左侧边：x=d（与外三角左侧边距离为d）
• 内三角斜边：与外三角斜边平行，根据平行直线距离公式，其方程为x + y = L - d×√2（√2≈1.4142，是等腰直角三角形的斜边比例系数）

内三角的三个顶点为三条边的交点：

1. 顶部边与左侧边交点：(d, d)
2. 顶部边与内斜边交点：(L - d×(1+√2), d)
3. 左侧边与内斜边交点：(d, L - d×(1+√2))

最终Tailwind实现代码 #

基于上述推导，我们用CSS变量实现可配置的等距内三角，完全适配Tailwind语法：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="m-10 relative" style="--l: 384px; --d: 30px; --sqrt2: 1.4142;">
  <!-- 外三角 -->
  <div class="absolute h-full w-full bg-black [clip-path:polygon(0%_0%,100%_0%,0%_100%)]"></div>
  <!-- 内三角（等距边框效果） -->
  <div class="absolute h-full w-full bg-red-400 
    [clip-path:polygon(
      var(--d)_var(--d), 
      calc(var(--l)-var(--d)*(1+var(--sqrt2)))_var(--d), 
      var(--d)_calc(var(--l)-var(--d)*(1+var(--sqrt2)))
    )]"></div>
</div>

关键说明 #

1. 变量可配置性：
   • --l：外三角的边长（控制外三角的大小，对应h-full w-full）
   • --d：内三角与外三角的边距（即你需要的“边框宽度”）
   • --sqrt2：√2的近似值，精度足够满足UI需求
2. 自适应特性：修改--l或--d时，内三角会自动保持与外三角的等距关系，无需手动调整其他参数
3. 非等腰三角扩展：如果外三角是非等腰直角三角形（高和宽不同），只需重新推导斜边的平行直线方程，核心逻辑保持不变

为什么你的之前尝试有问题？ #

你之前用calc(100%-var(--b))和2*var(--b)的方案，错误地假设了顶部边偏移量与斜边偏移量的线性关系，但实际上等距要求需要结合√2的几何系数，只有通过平行直线距离公式推导的坐标，才能保证三条边的边距完全一致。