使用HTML和CSS的邮件图标

我正在尝试用CSS创建一个电子邮件图标。这是作为UI或前端开发人员编写代码的正确方法吗

.container{
左边框：10px实心#80BD9E；
右边框：10px实心#80BD9E；
背景:#F98886；
高度：500px；
宽度：500px；
利润率：10%自动；
边界半径：6px；
}
.向下箭头{
宽度：0；
身高：0；
左边框：250px实心透明；
右边框：254px实心透明；
边框顶部：250px实心#80BD9E；
}
.向下箭头1{
最高：22%；
左：25.5%；
宽度：0；
身高：0；
左边框：250px实心透明；
右边框：254px实心透明；
位置：绝对位置；
边框顶部：250px实心#f98886；
边界半径：6px；
}
.顶层{
背景：#fff；
位置：绝对位置；
宽度：505px；
高度：100px；
左缘：24.5%；
利润率最高：-9.9%；
z指数：1；
}

---

删除第三个框。在那之后，这看起来很好

.container{
左边框：10px实心#80BD9E；
右边框：10px实心#80BD9E；
背景:#F98886；
高度：500px；
宽度：500px；
利润率：10%自动；
边界半径：6px；
}
.向下箭头{
宽度：0；
身高：0；
左边框：250px实心透明；
右边框：254px实心透明；
边框顶部：250px实心#80BD9E；
}
.顶层{
背景：#fff；
位置：绝对位置；
宽度：505px；
高度：100px；
左缘：24.5%；
利润率最高：-9.9%；
z指数：1；
}

---

很高兴看到您正在尝试用html和css进行创作。就像我之前建议的那样，最好/最简单的方法是只使用字体、材质图标或引导图标

但是，如果您自己制作图标，请尝试将“container div”与

位置：relative

以及图标的所有元素

位置：absolute

一起使用。目前，电子邮件呈现方式不正确：

---

试试这个。我需要将其嵌入电子邮件中，因为图像处理非常严格：

SCSS：尺寸和颜色将随着变量的变化而变化

$mail-size: 50;
$letter-color: white;
$letter-accent-color: gray;

.container{
  border: $mail-size * .06 + px solid $letter-accent-color;
  background-color: $letter-color;
  height: $mail-size * 1.4 + px;
  width: $mail-size * 2 + px;
  border-radius:6px;
}

.arrow-down {
  border-left: $mail-size + px solid transparent;
  border-right: $mail-size + px solid transparent;
  border-top: $mail-size + px solid $letter-accent-color;
}
.arrow-down1 {
  margin-top:-$mail-size * 1.008 + px;
  margin-left: -$mail-size * .92 + px;
  border-left: $mail-size * .92 + px solid transparent;
  border-right: $mail-size * .92 + px solid transparent;
  border-top: $mail-size * .92 + px solid $letter-color;
  border-radius:0px;
}

html

---

事实证明，这在电子邮件模板中也不起作用，哈哈

非常感谢。。。我只是试着用css制作。

<div class="container">
  <div class="arrow-down">
    <div class="arrow-down1">

    </div>
  </div>
</div>