html - CSS 为电子邮件绘制向下箭头(mail.google.com 问题)

Question

在我的电子邮件 html 模板中，我需要这个箭头

• 我的第一次尝试是 http://jsfiddle.net/b0vryojq/但是gmail在线客户端不处理position

• 所以我把它移到了http://jsfiddle.net/b0vryojq/2/ (我需要它居中对齐)但是在调整客户端大小时还是有问题

不要提供使用嵌入图像，它必须是 css ...

Answer 1

不能保证 margin auto 会在 Google 邮件中工作，但您可以尝试添加一个容器 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 在这里更新:http://jsfiddle.net/b0vryojq/6/