CSS 为电子邮件绘制向下箭头（mail.google.com 个问题）

Question

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

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

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

Answer 1

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

Answer 2

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

CSS 为电子邮件绘制向下箭头（mail.google.com 个问题）

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

html

css

email

gmail