用纯CSS3制作常见的小的三角箭头

发布时间：2023-10-26 15:23:33 所属栏目：语言来源：

导读：用纯CSS3实现网页中常见的小箭头，实现代码如下所示：

/* css3三角形（向上 ▲） */

div.arrow-up {

width:0px;

height:0px;

border-left:5px solid transparent; /* 右透明 */

border-

用纯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;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!