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

Question

我希望使用左箭头三角形制作内容document.cookie = "download=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"; ，而不是单独使用td三角形。就像在图像中一样。

td

任何帮助都会感激不尽。

Answer 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>

Answer 2

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用border使用CSS三角形的解决方案在Outlook 2007-2013中无法正常工作（正如预期的那样），因此，如果你要使用它，你可能需要看看这个{ {3}}

您必须使用VML定义三角形的形状，并调用它来定义其颜色和大小。