It's been a while since last time I updated the blog.

I've been really busy till this week. So I caught a chance to dig into some issue that I found when working in the email.

One of the question is how can we make out a image-free triangle arrow in email. Like below.
CTAButton
As I love Front-End development, it's pretty common that we can use a <div> to make out a CSS triangle. So for email, pretty easy, just move the CSS to be inline style. If you still don't have any idea on what's going on or how to do this. Check out this awesome animation.
http://codepen.io/chriscoyier/pen/lotjh
Thanks Chris Coyier for creating this.

So to do this from scratch first we will do something below. (Make sure you start from the animation above befor you going down this post)

<div style="border: 8px solid #ffffff; border-color: transparent transparent transparent #ffffff; width: 0px; height: 0px;"></div>

Which results in something below (It's white, so I added a black background color)

When you inspect the element. You will find it’s having extra width on the right.
Inspected Triangle
To remove it, simply add “border-right: none;” and it’s done. I’ll leave it as is. just to keep the code short.

Then if you tested it in Lotus Notes, you will see it’s not such perfect in Lotus Notes.

Lotus Notes Screenshot

So as to fix the issue in Lotus Notes, please add “font-size: 0; line-height: 0px;”

But Outlook 07/10/13 can’t work by this. So we need to use a VML shape to display it in Outlook. So the code will looks like below. And hide the <div> by applying“mso-hide: all;”.

So the whole code will look like:

<div style="border: 8px solid #ffffff; border-color: transparent transparent transparent #ffffff; mso-hide: all; width: 0px; height: 0px; font-size: 0; line-height: 0px; border-right: none;"></div>

<!--[if mso]>

<v:shape filled="true" style="width:8px;height:16px; position: relative;" fillcolor="#ffffff" stroked="f" path="M 0,1000 L 1000,500, 0,0 X E" xmlns:v="urn:schemas-microsoft-com:vml"><o:lock selection="t"/></v:shape>

<![endif]-->

The only thing you need to change is the width, height and color. But if you need to change the shape and have a clearer view of how the VML shape is working. Simply checking below description. Some may not be truly correct. But at least I do so and it works.

Reference read: https://msdn.microsoft.com/en-us/library/bb263897(v=vs.85).aspx

v:shape tag is a fixed format, just follow it.

filled: Tell the Outlook that if the shape is filled with color or pattern or image. Otherwise it’s transparent.

style: Decide the width and height of the shape. Position here is to let the shape to have a good alignment. It has more style to be applied, check the reference read.

fillcolor: Which color would you like to fill in the shape.

stroked: Tell Outlook that if you need a stroke line for the shape.

path: The path of the shape.

  • M: stands for moving to somewhere. Means move the point to x, y. Here 1000 you can treat as 100%. So here it means to move the point to x=0, y=100%.
  • L: stand for drawing line to somewhere. Means draw the line to x,y. Here it means draw the line to x=100%, y=50%, and then continue draw the line to x=0, y=0.
  • X: stands for closing the line to the starting point.
  • E: stands for ending this shape.

xmlns:v: Tells the render engine that it’s a VML statement. I think it won’t change anything if you remove it.

o:lock selection: Tell the Outlook that this is an unselectable shape.

Please let me know if you have any suggestion. Kindly send email to cyxjimmy@gmail.com