Slanted Edge

Bulletproof, responsive, sloped edges for modern email designs

The {slant} Helper provides consistent, reliable sloped edges between sections of your email. You can customize the size, color and dimensions of the slant. It renders using CSS in modern email clients and has a VML fallback for Outlook.

Usage

Example Inkcite markup:

 {div width=600 padding=15 bgcolor=#009}
    ...
 {/div}
 {slant bgcolor=#009 color=#909 width=600 height=50 bottom right}
 {div width=600 padding=15 bgcolor=#909}
    ...
 {/div}¬

An example of the resulting email HTML output:

 
<div style="background-color:#000099;mso-padding-alt:15px 15px 15px 15px;padding:15px;width:600px">
  ...
</div>
<!--[if lt mso 16]>
  <div style="font-size:0;line-height:0"><v:shapetype id="stl" path="m0,21600l21600,0,0,0xe" xmlns:v="urn:schemas-microsoft-com:vml"/><v:shapetype id="str" path="m0,0l21600,0,21600,21600xe" xmlns:v="urn:schemas-microsoft-com:vml"/><v:shapetype id="sbl" path="m0,0l21600,21600,0,21600xe" xmlns:v="urn:schemas-microsoft-com:vml"/><v:shapetype id="sbr" path="m0,21600l21600,21600,21600,0xe" xmlns:v="urn:schemas-microsoft-com:vml"/></div>
<![endif]-->
<table bgcolor=#000099 border=0 cellpadding=0 cellspacing=0 class="fill" style="width:600px" width=600>
  <tr>
    <td>
      <div class="slant25" style="-webkit-transform:rotate(0.0005deg);border-color:transparent #990099 #990099 transparent;border-style:solid;border-width:25px 300px;mso-hide:all"></div>
      <!--[if lt mso 16]>
        <div style="font-size:0;line-height:0"><v:shape fillcolor=#990099 stroked=f style="height:50px;mso-position-horizontal:center;width:600px" type="sbr"><o:lock selection="t"/></v:shape></div>
      <![endif]--></td>
  </tr>
</table>
<div style="background-color:#990099;mso-padding-alt:15px 15px 15px 15px;padding:15px;width:600px">
  ...
</div>
¬

Inkcite’s markup is 85% shorter than conventional HTML.

Attributes

Attributes in bold are required.

background

Place a background image behind the slant in email clients that support background images via CSS. Specifies the source of the background image.

background-position

If a background has been specified allows you to control the position of the background relative to the slant.

bgcolor

The color that appears behind the slanted edge

color

The foreground color of the slanted edge.

direction

Specify the location of the 90° corner of the slant using either top or bottom and left or right - e.g. bottom left

height

The height of the slope in pixels

no-fallback

If present, disables VML fallback so the slant doesn’t appear in Outlook 2007-2013.

no-wrap

If present, disables the table that wraps the slant. Use this if the slant is already in a container (e.g. table or div) that provides width and background color.

width

The width of the slope in pixels

Credit

Slanted edges based on @M_J_Robbins sloped edges for email concept.