HTML Email : Making triangle to the bottom of td

Question

I want to make a triangle as described in the image.

<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 : As I am making HTML Emailer , so can't use position , div , after: , before. I have to use table and inline-css , only.

Any help would be great.

Thank You.

Look into this for starters. http://stackoverflow.com/questions/7073484/how-do-css-triangles-work ... And then apply. — AA2992, Sep 08 '16 at 12:06
you have to make another `td` as `` below it with the *triangle image* of same color it will do the trick. — vivekkupadhyay, Sep 08 '16 at 12:56

aavrug · Accepted Answer · 2016-09-09T04:05:27.593

0

Here you go:

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

edited Sep 09 '16 at 04:05

answered Sep 08 '16 at 12:22

aavrug

1,849
1
12
20

as I have mentioned , I can't use `position`, `after: ` – Sep 08 '16 at 12:28
Ok see the updated snippet. – aavrug Sep 09 '16 at 04:06

HTML Email : Making triangle to the bottom of td

1 Answers1