HTML 电子邮件：td 左侧有三角形答案

【问题标题】：HTML Email : td with triangle to the left sideHTML 电子邮件：td 左侧有三角形
【发布时间】：2017-01-09 11:13:36
【问题描述】：

我不想为三角形设置单独的td，而是使用向左箭头三角形制作内容td。就像图片中一样。

<table>
  <tr>

    <td width="2%" align="center" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
      <p style="width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #fa4b00 transparent transparent; vertical-align: middle"></p>
    </td>

    <td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">

      <span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span>
      <br>
      <span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>

    </td>
  </tr>
</table>

任何帮助将不胜感激。

【问题讨论】：

这些通常使用:before 或:after 伪选择器来实现；两者都不能声明为内联。您可以通过嵌入在 HTML 中的 <style> 标记来执行此操作，但存在被 G-Mail 等服务剥离的风险。
完全正确.. 我不能使用 <style> ，因为某些电子邮件客户端不会呈现此类内容。我已经签入了 Gmail，但没有工作.. :(
我以前遇到过这种情况，不得不求助于使用表格列来获取带有三角形的透明图像，然后在右侧使用列来存储数据。我知道这并不理想，但我认为目前这是实现这一目标的唯一方法
标记正确答案

标签： html css html-table html-email

【解决方案1】：

如果您想通过使用这种工作流程来做到这一点，请使用边距。

在这个例子中我给出了

margin-right:-3px;

但我建议在前后使用伪元素。

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    
     <td width="2%" align="center" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
                                    <p style="width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #fa4b00 transparent transparent; vertical-align: middle;"></p>
                                </td>

                                <td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">

                                    <span  style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span><br>
                                    <span  style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>

                                </td>
    </tr>
  </table>

【讨论】：

是的@dippas 我刚刚检查过，这是正确的。使其在每个浏览器中都可以使用 margin:-3px;可以删除，表格标签可以更改为此

我指的是用border做一个三角形，看我的回答

您的回答在 Outlook 中也不起作用，因为您只使用图像而不是跨度，并且您使用的边距在 Outlook 中不受支持。这个更新的答案是解决方案

margin 仅在 Outlook.com 中不起作用，这与 Outlook 2007-2013 不同，正如我所提到的

@leli.1337... 在您的代码中，如果我这样做 select all ，那么该三角形不会选择 ..

【解决方案2】：

鉴于这是html-email，我建议您使用img，以支持所有电子邮件客户端

<table  cellpadding="0" cellspacing="0" border="0">
  <tr>

    <td width="2%" align="right" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
      <img src="http://i.stack.imgur.com/uLRTb.png" style="vertical-align:top;" />
    </td>

    <td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">

      <span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span>
      <br>
      <span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>

    </td>
  </tr>
</table>

使用border 使用 CSS 三角形的解决方案在 Outlook 2007-2013 中将不起作用（如预期的那样），因此，如果您要这样做，您可能需要查看此article

你必须用 VML 定义三角形的形状，并称之为定义它的颜色和大小。

【讨论】：