Add Borders to Your Triangles Using Pseudo-Elements

Add Borders to Your Triangles Using Pseudo-elements

Demo

This post will take less than a minute to read.

A while back I explained how to make a speech bubble using CSS and pseudo-elements. But what about if instead of giving the speech bubble a drop shadow, we wanted to give it a border?

Normally this wouldn’t be too difficult, but due to the shape of a speech bubble—a rectangle with a triangle underneath it—it becomes more difficult. We can easily give the rectangle a border, but considering the technique used to create the triangle, also giving that a border isn’t possible.

Luckily, we can use pseudo-elements for this, and by duplicating our triangle, increasing its size, and sitting it behind our original, we can give the appearance of a seamless border: http://jsfiddle.net/joshnh/26Lww/

Tweet this

6 Comments

  1. Jakob

    In case you need the triangle to be round, you have to do something like i did here: http://jakob.cosoroaba.ro/demos/2011.12.01%20Tags/

    Take the after square, rotate it and give it a border radius, and then if you have gradients be sure to adjust them for the 45deg rotation.

  2. Adam Whitcroft

    Nicely done! I was trying to figure this out a little while back and just gave up. Trust you to bring the CSS goods :)