css实现三角
设置： width、height 为0；border撑起内容；
原理：
- border: 分为top、right、bottom、left
- 分别是div内容上、右、下、左的边框
下面编辑器中执行：
<div class="triangle"></div>
<br><br>向上箭头
<div class="triangleTop"></div>
<br><br>向下箭头
<div class="triangleBottom"></div>
<br><br>向左箭头
<div class="triangleLeft"></div>
<br><br>向右箭头
<div class="triangleRight"></div>
说明： 要设置那个方向的三角箭头，把那个方向的border宽设置为0， 切颜色为透明； 对立方向的宽为具体数值颜色为想要的色值， 其他两个方向设置上宽度，颜色为透明；
如： 设置向左箭头；
border-top: 40px solid transparent;
border-right: 40px solid orchid;
border-bottom: 40px solid transparent;
border-left: 0px solid transparent;
也可整合成如下写法
border-style: solid;
border-width: 40px 40px 40px 0px;
border-color: transparent orchid transparent transparent;
根据上 右 下 左 顺序去设置
