CSS draw down arrow for email (mail.google.com issues)

Question

In my email html template I need this arrow

• my first attempt was http://jsfiddle.net/b0vryojq/ but gmail online client doesn't make deal with position

• so I moved it to http://jsfiddle.net/b0vryojq/2/ (I need it aligned to center) but still have troubles when resizing client

Don't offer use embedded image, it must be css ...

Answer 1

Cant guarantee that margin auto will work in Google mail but you can try adding a container div

<tr>
    <td>
         <div class="container">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </td>
</tr>

CSS

.container{
    width:48px;
    margin:auto;
}

.top{
    margin-left: 17.5px;
    min-height:24px;
    background:#bedfd0;
    width: 16px;
}

.bottom{                        
    border:solid transparent;  
    border-width:26px;
    border-top:31px solid #bedfd0;
    border-bottom-width: 0;
}

Jsfiddle update here: http://jsfiddle.net/b0vryojq/6/