用纯CSS3实现网页中常见的小箭头

用纯CSS3实现网页中常见的小箭头，实现代码如下所示：

div.arrow-up {
 width:0px;
 height:0px;
border-left:5px solid transparent;  
 border-right:5px solid transparent; 
  border-bottom:5px solid #2f2f2f; 
  font-size:0px;
  line-height:0px;
}

div.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;
}

div.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  
  border-top:5px solid transparent; 
  border-right:5px solid #2f2f2f; 
  font-size:0px;
  line-height:0px;
}

div.arrow-rightright {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  
  border-top:5px solid transparent; 
  border-left:5px solid #2f2f2f; 
  font-size:0px;
  line-height:0px;
}

总结

以上所述是小编给大家介绍的用纯CSS3实现网页中常见的小箭头，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！