Draw triangle arrows with CSS

Draw a triangle arrow with CSS. With pure CSS, you can create a wide range of browser-compatible triangle arrows with minimal code!

CSS code:

/* Create an arrow, points up */div.arrow-up {width:0;    height:0;  border-left:5px solid Transparent; /* LEFT ARROW slant */border-right:5px solid transparent; /* RIGHT ARROW slant */border-bottom:5px solid #2f2f2f;    /* Bottom, add background color here */font-size:0; line-height:0;}    /* Create an arrow, points down */div.arrow-down {width:0;    height:0;    border-left:5px solid Transparent;    border-right:5px solid Transparent;    border-top:5px solid #2f2f2f;    font-size:0; line-height:0;}    /* Create an arrow, points left */div.arrow-left {width:0;    height:0;  border-bottom:5px solid Transparent; /* LEFT ARROW slant */border-top:5px solid transparent; /* RIGHT ARROW slant */border-right:5px solid #2f2f2f;    /* Bottom, add background color here */font-size:0; line-height:0;}    /* Create an arrow, points right */div.arrow-right {width:0;    height:0;  border-bottom:5px solid Transparent; /* LEFT ARROW slant */border-top:5px solid transparent; /* RIGHT ARROW slant */border-left:5px solid #2f2f2f;    /* Bottom, add background color here */font-size:0; line-height:0;}

The key to drawing these triangles is that you want to have a thick border between the two sides of the direction the arrow is pointing. The opposite side of the arrow is also the same thick border, and this side of the color is the color of your triangle. The thicker the border, the larger the triangle. In this way you can draw arrows of various colors, various sizes, and various orientations. Best of all, you can do this with just a few lines of CSS code.

