原理就是:宽高为零,单独设置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的值,会影响该方向相邻两边的形状;