CSS Triangles

In the previous blog post regarding an Innovative idea for a progress bar, we made a progress bar with a triangle on top to indicate the progress. In this post I would like to tell you more about such triangles...

"The triangle" in Google's menu

So, what is the triangle? Well, basically, in CSS, when you set a border to an element with no width and height, it appears like four triangles joint to form a square. If you want an upward pointing triangle, simply set the border-bottom to some colour and the others to transparent If you want a downward pointing triangle, simple set the border-top to some colour and the others to transparent. Similarly you can get left pointing and right pointing arrows too...

But remember, these triangles must have zero width and height otherwise they'll look like trapeziums. To change the size of these triangles, use the border-width attribute of CSS.

Here's the code for the 4 triangles

.upward_triangle{
    width:0px;
    height:0px;
    /* Remember? width and height = 0 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid transparent;
    border-bottom: 15px solid red;
}

.downward_triangle{
    width:0px;
    height:0px;
    /* Remember? width and height = 0 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid red;
    border-bottom: 15px solid transparent;
}

.left_triangle{
    width:0px;
    height:0px;
    /* Remember? width and height = 0 */
    border-left: 15px solid transparent;
    border-right: 15px solid red;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.right_triangle{
    width:0px;
    height:0px;
    /* Remember? width and height = 0 */
    border-left: 15px solid red;
    border-right: 15px solid transparent;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}