CSS实现小箭头

在进行设计页面的时候，往往会遇到列表的前面或者文字的后面需要用到箭头的情况，我们可以直接用图片作背景填充，也可以用CSS代码实现，使用后者会比较方便，兼容性顾虑相对而言也会减少。

小了解：在这里使用了两种方法实现，第一种是利用CSS3中的【transform】，我们可以先实现一个没有背景填充小正方形，设置它的边框、翻转就可以实现；第二种是利用伪类【：after】，设定一个高宽相等的正方形，选取所需要的某一边截取，就成了梯形，当高宽都为0像素，且其他边为透明颜色时，一个三角形就可以实现了。

HTML代码部分： 

<div class="box">
	<p>随风潜入夜，润物细无声。</p>
	<div class="sr"></div>
	<p>安得广厦千万间，大庇天下寒士俱欢颜，风雨不动安如山。</p>
	<div class="ad"></div>
	<img  src="img/捕获.PNG"/>
</div>

 CSS代码部分：

* {
	margin: 0px;
	padding: 0px;
}
.box{
	position: relative;
	height: 460px;
	width: 460px;
	margin: auto;
	margin-top: 100px;
	background-colo