用纯css写三角形

正三角:

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

倒三角:

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

左三角:

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

右三角:

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

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

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

原文地址:https://www.cnblogs.com/yaser/p/4379576.html