纯css绘制箭头和三角形的三种方法

1、border法绘制三角形
以向上的三角为例，先看代码

<span></span>
span {
   
	display:block;
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

效果如图

原理分析
为什么通过border可以绘制三角形呢？
首先来看

span {
   
	display:block;
    width: 50px;
    height: 50px;
    border:30px solid;
	border-color: green orange blue red;
}

效果如图

可以看出，border并不是四个矩形拼接而成，而是四个三角形，那么，如果设置span高宽为0会发生什么呢？

span {
   
	display:block;
    width: 0;
    height: 0;
    border: 40px solid;
	border-color: green orange blue red;
}

可以看到，结果是由四个高为40px的三角形组成的span的border。
到这