<!--向上的三角-->
<div class="arrow-up"></div>

<!--向下的三角-->
<div class="arrow-down"></div>

<!--向左的三角-->
<div class="arrow-left"></div>

<!--向右的三角-->
<div class="arrow-right"></div>

/*箭头向上*/
.arrow-up{ width:200px; height:150px; background:#ECECEC; position:relative;margin-top: 50px;}
.arrow-up:after{
	position: absolute;
	right: 2px;
	top: -20px;
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ECECEC;
}              

		
 /*箭头向下*/
.arrow-down{ width:200px; height:150px; background:#ECECEC; position:relative;margin-top: 50px;}
.arrow-down:after{
	position: absolute;
	right: 1px;
	bottom: -20px;
	display: block;
	content: "";
	width:0; 
	height:0; 
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	border-top:20px solid #ECECEC;
}
		
 /*箭头向左*/
.arrow-left{ width:200px; height:150px; background:#ECECEC; position:relative;margin-top: 50px;margin-left: 50px;}
.arrow-left:after{
	position: absolute;
	right: 1px;
	left: -20px;
	display: block;
	content: "";
	width:0; 
	height:0; 
	border-top:20px solid transparent;
	border-bottom:20px solid transparent; 
	border-right:20px solid #ECECEC; 
}
   
/*箭头向右*/
.arrow-right{ width:200px; height:150px; background:#ECECEC; position:relative;margin-top: 50px;}
.arrow-right:after{
	position: absolute;
	right: 1px;
	right: -20px;
	display: block;
	content: "";
	width:0; 
	height:0; 
	border-top:20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #ECECEC;
}