Pure CSS3 Implementation of small arrow instances common in Web pages

This article mainly introduces the use of pure CSS3 to achieve the common small arrows in the Web page related information, the need for friends can refer to, hope to help everyone.

/* CSS3 triangle (up ▲) */p.arrow-up {width:0px; height:0px;border-left:5px solid transparent; /* Right transparent */border-right:5px solid transparent; /* Right transparent */border-bottom:5px solid #2f2f2f;  /* Define the bottom color */font-size:0px; line-height:0px;}  /* CSS3 triangle (down) */p.arrow-down {width:0px;  height:0px;  border-left:5px solid Transparent;  border-right:5px solid Transparent;  border-top:5px solid #2f2f2f;  font-size:0px; line-height:0px;}  /* CSS3 triangle (left) */p.arrow-left {width:0px;  height:0px;  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:0px; line-height:0px;}  /* CSS3 triangle (right) */p.arrow-rightright {width:0px;  height:0px;  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:0px; line-height:0px;}