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

2018-06-24 01:57:01来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

/* 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;

}

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:介绍一款小众的IDE

下一篇:前端HTML以及HTML5(基本标签)