user123 user123 - 3 months ago 18
CSS Question

HTML Email : td with triangle to the left side

Rather than having separate

td
for triangle , I would like to make the content
td
with left arrow triangle. Just like in the image.



<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

Any Help Would be Grateful.

Answer

Given this is for , I would advise you to use an img, to support all the email clients

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

The solution for using CSS triangles using border won't work (as expected) in Outlook 2007-2013, so,if you are going with that, you might need to take a look at this article

Where you have to define the triangle's shape with VML and call it defining its color and size.