<div class="arrow-up"> ????<!--向上的三角--></div><div class="arrow-down"> ???<!--向下的三角--></div><div class="arrow-left"> ???<!--向左的三角--></div><div class="arrow-right"> ???<!--向右的三角--></div>
下面用CSS3分别实现向上、下、左、右的三角形
/*箭头向上*/.arrow-up { ???width:0; ????height:0; ????border-left:30px solid transparent; ???border-right:30px solid transparent; ???border-bottom:30px solid #fff;} ????/*箭头向下*/.arrow-down { ???width:0; ????height:0; ????border-left:20px solid transparent; ???border-right:20px solid transparent; ???border-top:20px solid #0066cc;} ????/*箭头向左*/.arrow-left { ???width:0; ????height:0; ????border-top:30px solid transparent; ???border-bottom:30px solid transparent; ????border-right:30px solid yellow; } ??/*箭头向右*/.arrow-right { ???width:0; ????height:0; ????border-top:50px solid transparent; ???border-bottom: 50px solid transparent; ???border-left: 50px solid green;}箭头朝向那个方向就不用写他的border,在反方向设置颜色 其他方向上的透明度为0
css3 小三角的用法
原文地址：https://www.cnblogs.com/gygtech/p/9926337.html