css 画三角形箭头

效果：

代码：

.left-arrow
{
	border-style: solid;
	width: 0px;  
	height: 0px;  
	border-width: 30px;  
	border-color: transparent green transparent transparent;  
}

解析：

（一）border-color 的解释

我们把上述代码的 border-color 改成如下样式：

看看效果：

所以可得出结论：

border-color 从左到右的四个域着色 对应 上->右->下->左 (顺时针)。

四个域中，只需留下一个域的颜色，其他三个域设置成透明，即可形成箭头。

如：

效果：

（二）border-style的解释：

boder-style 必需设置成 solid ，意为边框为实线，因为整个箭头其实就是边框来的，如设置需虚线，就会：

（三）width 和 height = 0的解释

当内容设置为0时（即内容消失），整个箭头就是边框。

（四）测试代码：