头朝下的小三角
width:0;
height:0;
border:50px solid transparent; //所有border都是透明的，
border-top-color:black; //只有尖相对的方向border有颜色
同理，头朝上的小三角，只要把border-top-color改成border-bottom-color就可以啦
头朝上的小三角
聪明的你，肯定就知道头朝左的小三角是border-right-color，头朝右的小三角是border-left-corder了，那我就不再多说啦
根据这种小三角我们也很容易写出向上、下、左、右的箭头，下面我就写一个头朝下的箭头
<div class="jiantou"></div>
.jiantou{
width: 14px;
height: 14px;
border-top: 5px solid #333;
border-right: 5px solid #333;
transform: rotate(45deg);
}
原理很简单，主要是border控制箭头的方向和宽度，width和height要一样大箭头才会对称效果如图：
向右的小箭头
同理，其他方向的小箭头就都能写出来啦。
还有就是小旗子，也是可以根据上面说到的小三角写出来，只要把border和border-top-color的颜色值换一下，不显示哪里哪里就是透明色，显示的额地方就是你想要的颜色
width: 0;
height: 0;
border: 30px solid black;
border-bottom-color: transparent;
效果如图：
还有就是四个角的小三角：左上角，左下角，右上角，右下角
左上角的小三角
width:0;
height:0;
border-left:50px solide transparent;
border-bottom:50px solide black;
右下角的小三角
width:0;
height:0;
border-right:50px solide transparent;
border-top:50px solide black;
其实我觉得记着、这些没啥用，然后就找到了规律
小三角在上边就有border-top，在下边就有border-bottom，左右都是相对的
还有左右方向一直是透明颜色，上下相对的一方是你想要的颜色
咋样？也可能我说的不够清楚，反正呢，就互相学习吧