.css 小三角的实现

原理就是：宽高为零，单独设置border的宽度，然后上右下左，根据需要选择三角形的方向，比如选向上箭头，其他右、下、左设置为透明；

*{margin:0px; padding:0px;}
div{width:0px; height:0px; border:solid 5px transparent; border-top-color:#000;}

1.宽高都为0；
2.实心
3.给边框宽 朝哪边 哪边为0
4.给边框颜色 朝哪边给哪边颜色；

非等边三角形

div{
margin: 20px 0;
width: 0;
height: 0;
border-top: 131px solid red;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}

1.需要那个方向上的小三角，需要将其他三个方向的颜色设置为transparent(透明)， 该方向上是你需要的颜色；
2.三角形的朝向与之相反：top-bottom, bottom-top, right-left, left-right;
3.不能给目标元素设置width和height
4.改变任意一个方向上border的值，会影响该方向相邻两边的形状；