HTML电子邮件：将三角形设置为td的底部

Question

我想制作一个如图所示的三角形。

<table>
  <tr>
    <td align="left" valign="top" style="padding-top: 10px; padding-left: 0px;">
                        <span style="background: #EE163A !important; width: 100px; font-size: 15px; text-align: center; vertical-align: middle; color: #FFFFFF;padding: 10px 70px; "> DAY 1</span>
                    </td>
  </tr>
  </table>

PS：我在制作HTML电子邮件时，因此无法使用position，div，after:，before。我必须仅使用table和 inline-css 。

任何帮助都会很棒。

谢谢。

Answer 1

你走了：

<table>
    <tr>
        <td align="left" valign="top" style="padding-top: 10px; padding-left: 0px;">
            <span style="background: #EE163A !important; width: 100px; font-size: 15px; text-align: center; vertical-align: middle; color: #FFFFFF;padding: 10px 70px; "> DAY 1</span>
        </td>
        <td>
            <span class="arrow" style="margin-left:-100px; width: 0; height: 0; border-top: solid 5px #EE163A; border-left: solid 5px transparent; border-right: solid 5px transparent; display: block; margin-top: 37px;"></span>
        </td>
    </tr>
</table>