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

2023-12-01

而不是单独的td对于三角形,我想制作内容td with 左箭头三角形。就像图像中一样。

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

Here is the image

任何帮助将不胜感激。


如果您想使用这种工作流程来完成此操作,请使用边距。

在这个例子中我给出了

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 电子邮件 : td 左侧带有三角形 的相关文章