本文主要介绍了用纯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; }
相关推荐：
css实现带有三角小箭头的矩形效果_html/css_web-itnose
css+p如何做一个右边有小箭头的层_html/css_web-itnose
javascript箭头函数的用法介绍
以上就是纯css3实现网页中常见的小箭头实例的详细内容。