CSS 三角形

效果：

Test Text

实现代码：

<div>
<span class="arraw down"></span>
<span class="arraw up"></span>
<span class="arraw left"></span>
<span class="arraw right"></span>
Test Text  
</div>

 样式代码：

	.arraw{ 
		display: inline-block;
		width: 0px;
		height: 0px;
	}
	.down{
		border-top: 12px solid #000;
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
		border-bottom: 0px solid #000; 
	}
	.up{  
		border-bottom: 12px solid #000;
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
		border-top: 0px solid #000; 
	}
	.left{  
		border-right: 12px solid #000;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 0px solid #000; 
	}
	.right{  
		border-left: 12px solid #000;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-right: 0px solid #000; 
	}

来自为知笔记(Wiz)