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;