Skip to content

Instantly share code, notes, and snippets.

@revelt

revelt/Email Triangles Sample

Created September 30, 2014 08:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save revelt/475242856d871818e940 to your computer and use it in GitHub Desktop.
Save revelt/475242856d871818e940 to your computer and use it in GitHub Desktop.
Download ZIP
M_J_Robbins Email Triangles http://emailcodegeek.com/css-triangles/
Raw
Email Triangles Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>Email Title</title>
<style>
.ExternalClass * {
line-height: 100%;
}
table {
border-collapse: collapse;
}
.apple-link-white a{
color:#eeeeee;
text-decoration:none;
}
.apple-link-black a{
color:#000;
text-decoration:none;
}
@media screen and (max-width: 600px) {
table[class="outer"]{
width:100%;!important;
}
}
</style>
</head>
<body>
<!--[if mso]>
<v:shapetype id="triangle" path="m,l21600,,10800,21600xe" xmlns:v="urn:schemas-microsoft-com:vml"/>
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#42a7bc" >
<tr>
<td>
<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" > <tr>
<td height="200">
<span style="color:#eeeeee; font-size:60px; font-family:arial;">
content in here
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#3da276" >
<tr>
<td>
<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center">
<div style="height:0px; width:0; border-top: 20px solid #42a7bc;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom: 0;
mso-hide:all;">
</div>
<!--[if mso]>
<v:shape type="#triangle" style="width:80px;height:20px;mso-position-horizontal:center;" fillcolor="#42a7bc" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><o:lock selection="t"/></v:shape>
<![endif]-->
</td>
</tr>
<tr>
<td height="200" align="right">
<span style="color:#eeeeee; font-size:60px; font-family:arial;">
content in here
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333" >
<tr>
<td>
<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center">
<div style="height:0px; width:0; border-top: 20px solid #3da276;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom: 0;
mso-hide:all;">
</div>
<!--[if mso]>
<v:shape type="#triangle" style="width:80px;height:20px;mso-position-horizontal:center;" fillcolor="#3da276" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><o:lock selection="t"/></v:shape>
<![endif]-->
</td>
</tr>
<tr>
<td height="200">
<span style="color:#eeeeee; font-size:60px; font-family:arial;">
content in here
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment