如何使用纯CSS3实现网页中常见的小箭头-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

这篇文章主要介绍如何使用纯CSS3实现网页中常见的小箭头,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站主要从事成都网站建设、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务溆浦,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

用纯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;
}
/* css3三角形(向下 ▼) */
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;
}
/* css3三角形(向左) */
div.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三角形(向右) */
div.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;
}

以上是“如何使用纯CSS3实现网页中常见的小箭头”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


分享名称:如何使用纯CSS3实现网页中常见的小箭头
标题来源:http://kswsj.cn/article/goojgd.html

其他资讯