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

无法保证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/

CSS绘制电子邮件的箭头（mail.google.com问题）

2 个答案: