时间戳

首页 > 解决方案 > 用于电子邮件签名的两个纯 CSS 形状设计

html - 用于电子邮件签名的两个纯 CSS 形状设计

问题描述

首先，在花费更多时间试图弄清楚这一点之前，我希望您对仅用于电子邮件签名的 CSS 形状的反馈？它们是否显示良好，是否与大多数电子邮件客户端兼容？

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

我想避免使用 png 的原因是签名直接显示，而用户不必接受/下载附件。

我们的标志很简单，所以我想也许只有 CSS 的代码会正确显示？

我试过这个工具没有成功：https ://bennettfeely.com/clippy/

我应该继续尝试还是因为无法正确显示而毫无意义？如果是这样，关于如何将两种形状与 2 种不同颜色组合的任何建议？

标签： htmlcssemailsvgsignature

解决方案

您可以创建一个父级和两个子div级（所有正方形，具有不同的宽度/高度设置），position: relative用于父级和position: absolute两个子级，设置类似于下面的示例。top: 0子 div 都使用和锚定到父级的右上角right: 0

.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>

作为一种变体，您也可以只使用两个divs，子 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>

推荐阅读