css3样式实现三角形原理:实际上是定义一个宽和高为0，有边框的div盒子，其中显示的边框有颜色，不显示的边框设置成透明

第一步: 新建一个div

   <div></div>

第二步: 给div添加样式属性

   width: 0;
   height: 0;

制作三角形向上
由盒子的左边框、顶部边框、右边看组合而成的向上三角形箭头图标

   样式属性:
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   border-top: 8px solid #ccc;

制作三角形向右
由盒子的顶部边框、右边框、底部边框组合而成的向右三角形箭头图标

   样式属性:
   border-top: 8px solid transparent;
   border-right: 8px solid #ccc;
   border-bottom: 8px solid transparent;

制作三角形向下
由盒子的左边框、底部边框、右边框组合而成的向下三角形箭头图标

   样式属性:
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   border-bottom: 8px solid #ccc;

制作三角形向左
由盒子的顶部边框、左边框、底部边框组合而成的向左三角形箭头图标

   样式属性:
   border-top: 8px solid transparent;
   border-left: 8px solid #ccc;
   border-bottom: 8px solid transparent;