css-箭头、三角形系列

需求一：不用图片，只用css实现各种上下左右的箭头

思路

1. 先写一个只有右border、下border的带颜色的反 “ L ” ,内容部分由padding撑起来，然后根据css3的rotate属性进行各种旋转，实现上 下 左 右四个方向的箭头

//html部分,此处的arrow就是所有旋转的基础
		<span class="arrow"></span>
		<span class="arrow up"></span>
		<span class="arrow down"></span>
		<span class="arrow left"></span>
		<span class="arrow right"></span> 

//css部分
	.arrow {
   
			border: solid black;
			border-width: 0 2px 2px 0;
			display: inline-block;
			padding: 6px;
		}
		.<