用纯css写三角形

正三角：

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent transparent red transparent;border-style:dashed dashed solid dashed;}

倒三角：

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: red transparent transparent transparent;border-style: solid dashed dashed dashed;}

左三角：

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent red transparent transparent;border-style: dashed solid dashed dashed;}

右三角：

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent transparent transparent red;border-style: dashed dashed dashed solid;}

 

对三角形的高度进行控制：

.triangle{width:0;height:0;overflow:hidden;border-top: 5px solid transparent; border-bottom: 5px solid transparent;border-left: 8px solid #c40000;}