你的位置:首页 > 软件开发 > 网页设计 > css3制作网页中常见的小箭头

css3制作网页中常见的小箭头

发布时间:2017-10-13 22:00:08
/* css3三角形(向上 ▲) */div.arrow-up { width:0px; height:0px;border-left:5px solid transparent; /* 右透明 */ border-right:5px ...

/* 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制作网页中常见的小箭头

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。