电子邮件的 CSS 向下箭头（mail.google.com 问题）答案

【问题标题】：CSS draw down arrow for email (mail.google.com issues)电子邮件的 CSS 向下箭头（mail.google.com 问题）
【发布时间】：2015-10-25 21:20:48
【问题描述】：

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

我的第一次尝试是http://jsfiddle.net/b0vryojq/，但gmail在线客户端不处理position
所以我把它移到了http://jsfiddle.net/b0vryojq/2/（我需要它与中心对齐）但在调整客户端大小时仍然遇到问题

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

【问题讨论】：

标签： html css email gmail

【解决方案1】：

不能保证自动边距在 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/

【讨论】：

【解决方案2】：

如JSFIDDLE 所示，您可以使用 CSS calc() 来解决此问题

.div1 {
    min-height:24px;
    background:#bedfd0;
    width: 16px;
    margin-left:calc(50% + 8px);
}
.div2 {
    border:solid transparent;
    min-height:0;
    width:0;
    border-width:26px;
    border-top:31px solid #bedfd0;
    margin-left:calc(50% - 10px);
}

<tr>
    <td>
        <div class="div1"></div>
        <div class="div2"></div>
    </td>
</tr>

【讨论】：

谢谢，但似乎 gmail 忽略了负边距 margin-left:calc(50% - 10px);
该值不会为负 - *直到电子邮件视口的总宽度小于20px * - 此函数应返回正值，因为这意味着，计算总数的 50%宽度并减去 10px
我已经用你的 css 发送了电子邮件 - 第一个 calc 被渲染，但第二个没有：\