原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了
梯形
Document
.arrow {
width: 10px;
height: 10px;
border: 10px solid #000;
border-left-color:red;
}
2.把高宽设为0，其他边为透明颜色，三角形出来了
Document
.arrow {
width: 0;
height: 0;
border: 10px solid #000;
border-left-color:red;
}
3.在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。
Document
.arrow{
position: relative;
width: 100px;
height: 40px;
background-color: #000000;
}
.arrow::after {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color:red;
content:'';
position: absolute;
left: 100px;
top: 10px;
}
4.现在追求平面化设计，还有另一种三角线箭头，更受欢迎。
设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好
Document
.arrow{
position: relative;
}
.arrow::after,
.arrow::before {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: red;
position: absolute;
content: "";
}
.arrow::before {
top: 0;
left: 73px;
border-left-color: blue;
}
.arrow::after {
top: 0;
left: 70px;
border-left-color: #ffffff;
}