How to create triangles using CSS easily

We often see some tooltips that uses triangular arrows to emphasize the content and images were often used for the arrows. Now, with new techniques, we can create these arrows in CSS just fine.

Here’s an example:

CSS equilateral triangle

 

We’ll use CSS borders to create the triangles. You may ask, “Why can borders do that?”. It’s because browsers draw borders as triangles and we can use that to make triangles.

First, as the borders are drawn around the container we need to make sure the container has no width & height (i.e. set them to zeros).

HTML:

CSS:

Then, we need to add borders in. In order to aid the creation of triangles, we need to add colours to all sides. It’ll now look like this:

Triangles diagram

 

CSS:

You can now see 4 triangles showing up. By adjusting the thickness of each side of border, you can create different types and sizes of triangles. Examples are:

Triangles example 3Triangles example 2Triangles examples 1

After that, you need to eliminate the other parts by setting their colour to transparent. Now it’s finished just like the first diagram. You can even make dialogues using this technique with CSS3’s :before & :after selectors. It’s very cool, isn’t it?

Here’s some things that I’ve made with this technique. Check it out! http://dabblet.com/gist/5500863

Published by

Licson Lee

Hi! I'm Licson. I'm a student who loves programming.

Leave a Reply

Your email address will not be published. Required fields are marked *