三角形元素在网页中到处可见，对于三角形的实现方法也不同，有的可能直接用图片，但是很多情况下没有必要，那我们可能就会选择使用css来实现三角形。对于三角形的css实现，我所熟知的有两种：

1、使用三个透明的边和一个实体的边来实现一个三角形，代码如下：

.arrow{
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #f1f1f1;
}

这种实现有一定的缺陷，就是三角形是单一颜色的。

2、通过正方形旋转，然后调节位置控制部分隐藏来实现。

.arrow{
	width: 10px;
	height: 10px;
	border: 1px solid #f1f1f1;
	transform: rotate(-45deg);
}

这种方法相对较好，我一般用这种，可以做出三角和边线连接的效果。

一个demo显示这两种方法最本质的区别：http://demo.deanhan.cn/triangle