当前位置:Gxlcms > css > 纯CSS3实现网页中常见的小箭头实例

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

时间:2021-07-01 10:21:17 帮助过:30人阅读

本文主要介绍了用纯CSS3实现网页中常见的小箭头的相关资料,需要的朋友可以参考下,希望能帮助到大家。

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

相关推荐:

CSS实现带有三角小箭头的矩形效果_html/css_WEB-ITnose

css+p如何做一个右边有小箭头的层_html/css_WEB-ITnose

JavaScript箭头函数的用法介绍

以上就是纯CSS3实现网页中常见的小箭头实例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行