电子邮件中的形状 - 一个好的做法？

Question

我正在向我的客户发送包含优惠券信息的电子邮件。我想用图形表示代金券。

我想出了一个设计表格样式的想法（因为表格在电子邮件客户端中很受欢迎）- 检查我的解决方案的代码片段。

我不想使用图片，因为它们在大多数电子邮件客户端中默认被禁用。

My question being: is it well recieved by mail clients and programs or should I refrain from such practice?

 #badge-ribbon { 
   position: relative; 
   background: red; 
   height: 100px; width: 100px; 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px; 
 } 
#badge-ribbon:before, #badge-ribbon:after { 
  content: ''; 
  position: absolute; 
  border-bottom: 70px solid red; 
  border-left: 40px solid transparent; 
  border-right: 40px solid transparent; 
  top: 70px; 
  left: -10px; 
  -webkit-transform: rotate(-140deg); 
  -moz-transform: rotate(-140deg); 
  -ms-transform: rotate(-140deg); 
  -o-transform: rotate(-140deg); } 
#badge-ribbon:after { 
  left: auto; 
  right: -10px; 
  -webkit-transform: rotate(140deg); 
  -moz-transform: rotate(140deg); 
  -ms-transform: rotate(140deg); 
  -o-transform: rotate(140deg); 
}

 <table id="badge-ribbon">

Answer 1

我会避免使用这种技术并使用图像，因为很多这样的 CSS 很可能在 Outlook 客户端中不起作用，并且 Gmail 将完全去除嵌入的 CSS。图像未加载的后备方法是使用 Alt 标签传递 headline/copy

Campaign Monitor CSS support guide

Answer 2

电子邮件中的

CSS 大约处于 CSS 1.8 水平，它很少比 1998 年的 CSS 更令人兴奋或更有用。最好的办法是发送一封简单的电子邮件，其中包含使用 style 元素和 table 设计结构的 HTML 代码覆盖。图像和大色块是最好的方法，因为 CSS 3 支持几乎不存在，而且 HTML CSS 支持通常非常零散和不均匀，甚至取决于 CSS 时，有些东西作为 style 元素工作，但附加 CSS 样式表通常从 HTML 代码中分离出来。

CSS3 通常不被电子邮件客户端支持。

有一个简单干净的电子邮件，带有明亮粗体色块 and/or 图像和一个清晰干净 link 的网页，在漂亮的 HTML5 和 [=20= 中显示相同的消息]3。

电子邮件中的形状 - 一个好的做法？

Shapes in emails - a good practice?

html

css

email

css-shapes