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

这篇文章主要介绍如何使用纯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实现网页中常见的小箭头”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网html频道！