Learn to code HTML email. I've created a free HTML email course with my teammates at Parcel

CSS triangles

I originally wrote about this back in 2014 on my old site. So reposting with some small updates.

Essentially this is exactly as it sounds, a triangle shape made from CSS (or VML for Outlook). They come up occasionally in designs and this saves using an image.

The code

<div style="border:2em solid transparent;border-top-color:red;border-bottom:none;display:inline-block"></div>
<!--[if mso]>
  <v:shape path="m,l1000,0 500,1000xe" style="width:64px;height:32px;" fillcolor="red" stroked="f"><o:lock selection="t"/></v:shape>
<![endif]-->

This code produces a small red triangle like this.

We can make this point left, right, up or down and in in diagonal directions top left, top right, bottom right, bottom left.

The CSS part

<div style="border:2em solid transparent;border-top-color:red;border-bottom:none;display:inline-block"></div>

The concept here is, if we set borders on an element that has no height or width, then the 4 sides of the border will take the shape of 4 triangles. We can see this if we set a different colour on each side.

So there are a number of ways to write the code but this is the simplest I’ve found. Start by setting a transparent boarder border:2em solid transparent then colour one side border-top-color:red; and remove the space from the opposite side border-bottom:none; and set the element to display:inline-block.

To get a diagonal arrow, can either put 2 sides together, here I am using top and left

<div style="border:2em solid transparent;border-top-color:red;border-left-color:red;display:inline-block"></div>

Or you can just set the border on 2 sides

<div style="border-top:2em solid red;border-right:2em solid transparent;display:inline-block"></div>

The VML part

<!--[if mso]>
  <v:shape path="m,l1000,0 500,1000xe" style="width:64px;height:32px;" fillcolor="red" stroked="f"><o:lock selection="t"/></v:shape>
<![endif]-->

For MSO Outlook, we have to use VML(Vector Markup Language) to get the same effect. VML is a deprecated language used for drawing shapes, similar to SVG. We can actually draw a number of shapes with VML I’d like to write about this more in the future but for now we’ll focus on the simple triangle.

Big thanks to Stig who helped me out with this original code back in my 2014 article.

Please note to get VML to work you need to Outlook specific xmlns:v="urn:schemas-microsoft-com:vml" and xmlns:o="urn:schemas-microsoft-com:office:office" applied to your <html> element as described in the email template HTMl element article. If for some reason you can’t add that to your HTML element then you can apply it directly to each <v:shape> element.

<v:shape></v:shape>

This defines a customer shape that we’re going to draw, there are also a number of predefined shapes rect, roundrect, line, polyline, curve, arc.

path="m,l1000,0 500,1000xe"

The path gives the coordinates of the shape.

m defines the stating point of the line. Here were’ not defining a position just m, so that will start of the default top left position 0,0

l draws a line, from our start position.

1000,0 moves the line 1000 from the left and 0 from the top.

500,1000 sets the next point 500 from the left and 1000 from the top.

x returns the line back to the start point set in the m.

e stops drawing.

To help you out a bit, here are the paths for each direction;

style="width:64px;height:32px;"

This sets the height and the width of the shape. It will stretch and distort like an <img> rather than fit to the size like an <svg>. I’ve also switched the em to px here as VML seems to have issues with the size of em.

I did previously have mso-position-horizontal:center; set in the styles too, but found this doesn’t do anything, if you want to align the shape just use text-align on the parent element.

fillcolor="red"

Sets the colour of the shape.

stroked="f"

This turns the default stroke off. If you want to use a stroke you can add a VML Stroke Element.

<o:lock selection="t"/>

This makes the shape not selectable. Personally I find the naming is a little confusing here, setting it to true so it’s not selectable, but I believe the logic here is saying lock selection true.