向上的三角形:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
向下的三角形:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
向右的三角形:
#triangle-up {
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-left: 100px solid blue;
}
向左的三角形:
#triangle-up {
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid blue;
}
结论:四个border必然有一个border的宽度为0,剩下的三条边则分别对应三角形的三条边的长度,向哪个方向那么这个方向的broder的值就为0(即不写)。