How to design a Down Triangle using CSS3

By | August 14, 2015


This tutorial teaches you how to design a simple but powerful triangle pointing down using CSS.

I am sure we have been seeing things like this on Facebook, Google-plus, etc and wonder how it can be done. It is very easy to do using CSS.

Most of these designs are often done with an image in the CSS file and also with the help of a JavaScript but this one is special in the sense that it does not require an image or a JavaScript, it uses CSS only.

In this tutorial, we are going to use the CSS pseudo classes which are :before and :after with HTML codes to accomplish the task.

Below are the codes and demo of the tutorial and its very simple to understand and use in an application as it contains only few codes.

CSS Code:

HTML Code:

Tutorial Demo:


Set status to Online
Set status to Offline
Set status to Busy
Turn off chat