你的位置:首页 > 网页设计

[网页设计]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;

}