CSS Triangle

09.Sep.2015

This is the CSS snippet for simple triangle. CSS triangle use just one HTML element and some simple styles that makes it much easier to use and maintain instead of image icons.

/* right triangle */
.right {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000;
}
/* left triangle */
.left {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #000;
}
/* down triangle */
.down {
    width: 0;
    height: 0;
    border-top: 20px solid #000;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
/* up triangle */
.up {
    width: 0;
    height: 0;
    border-bottom: 20px solid #000;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
/* top-right triangle*/
.top-right {
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #000;
}

Examples of CSS triangles: