无法使用父级阴影时如何为CSS clip-path绘制的三角形加0.2vw边框

多次尝试为CSS clip-path 绘制的三角形添加厚度为0.2vw的边框均未成功，需获取可行实现方案：

• 验证“在现有三角形上方叠加颜色不同、缩放比例有差异的第二个clip-path元素，以此模拟边框效果”的思路是否可行
• 提供适配当前业务场景的更优实现方式

场景限制 #

• 受业务规则约束，不能通过给父元素添加阴影效果模拟边框
• 最终效果参考：，实际精度要求高于参考图
• 现有代码为业务表格的简化版本，无法随意调整父元素属性实现效果

现有代码实现 #

CSS代码 #

th{
  vertical-align: middle;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  text-align: left;
  border-collapse: collapse;
}

tr{
  vertical-align: middle;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  border-collapse: collapse;
  height:30px
}

.routeTable td{
  border: 0.2vw solid black;
  font-size: 1.4vw;
  text-align: center;
  vertical-align: middle;
}

.rect{
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  background-color: #357987;
  width: 2vw;
  height: 2vh;
}

table{ 
  width: 20% !important;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
  border-spacing:0;
  border-collapse: collapse;
  background-color: white;
}

HTML代码 #

<table class="routeTable" style="margin-top: 1vw;">
  <tbody>
    <tr>
      <td rowspan="2" style="color:black; font-size: 2vw;" class="rect" class="left"></td>
      <td rowspan="2"></td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="2" style="color:black; font-size: 2vw;" class="rect" class="left"></td>
      <td rowspan="2"></td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="2" style="color:black; font-size: 2vw;" class="rect" class="left"></td>
      <td rowspan="2"></td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="2" style="color:black; font-size: 2vw;" class="rect" class="left"></td>
      <td rowspan="2"></td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="2" style="color:black; font-size: 2vw;" class="rect"></td>
      <td rowspan="2"></td>
    </tr>
    <tr></tr>                         
  </tbody>
</table>

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