两种仅CSS形状的电子邮件签名设计

问题描述

首先，在花更多时间尝试解决这个问题之前，我希望您对仅用于电子邮件签名的CSS形状的反馈吗？它们显示良好，并且与大多数电子邮件客户端兼容吗？

我设计了一个带有svg徽标和社交媒体图标的电子邮件签名，只是为了意识到Outlook和其他客户端不会显示这些签名。 https://4thsi.com/signature/svg/florian.html

我要避免使用png的原因是这样，签名就直接显示出来，而无需用户接受/下载附件。

我们的徽标非常简单，所以我想也许只有CSS的代码才能正确显示？

我已尝试使用此工具，但未成功：https://bennettfeely.com/clippy/

我应该继续尝试还是没有意义，因为无法正确显示？如果可以的话，关于如何将两种形状与两种不同颜色组合在一起的建议？

解决方法

您可以创建一个父项和两个子项div（所有正方形，具有不同的宽度/高度设置），对父项使用position: relative，对两个子项使用position: absolute，并使用设置类似于下面的示例。通过使用top: 0和right: 0

，子div都固定在父级的右上角。

.a {
  position: relative;
  width: 200px;
  height: 200px;
  background: blue;
}

.b {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: white;
}

.c {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: red;
}

<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>

作为一种变体，您也只能使用两个div，并且子div的左侧和底部带有白色边框：

.a {
  position: relative;
  width: 200px;
  height: 200px;
  background: blue;
}

.b {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: red;
  border-left: 10px solid #fff;
  border-bottom: 10px solid #fff;
}

<div class="a">
  <div class="b"></div>
</div>

html signature svg