Draw a triangle arrow pattern with pure CCS and draw a triangle with ccs

Draw a triangle arrow pattern with pure CCS and draw a triangle with ccs

Draw a triangle arrow with CSS. With pure CSS, you only need a small amount of code to create triangle arrows compatible with various browsers!

 

CSS code:

/* create an arrow that 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 that 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 that 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 that 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 need to make the two sides in the direction pointed by the arrow have a very thick border. The side of the arrow is the same thick border, and the color of this side is the color of your triangle. The thicker the border, the larger the triangle. In this way, you can draw arrows of various colors, sizes, and orientations. The best thing is that you only need a few lines of CSS code to achieve this effect.