您的当前位置:首页正文

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

2020-11-27 来源:爱够旅游网

这篇文章主要介绍了用纯CSS3实现网页中常见的小箭头的相关资料,需要的朋友可以参考下

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

总结

显示全文