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

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 标签来传递标题/副本

Campaign Monitor CSS support guide