html/css 写出类似遥控器方向键，上下左右键

最近要做一个摄像头交互的功能，其中有一个功能是通过后台管理调用海康摄像头sdk去控制摄像头上下左右摇动。整理了一个html和css画出四个方向键UI的代码。效果图和代码如下：（欢迎交流）

效果图：

html：

		

			
摄像头方向控制
			

				

					
				
				

					
				
				

					
				
				

					
				
			
		

css：

/*摄像头方向控制*/
.change_camera_direction{
	background-color: sandybrown;
	text-align: center;
	position: absolute;
	top: 0%;
	width: 200px;
	height: 200px;
}
.change_camera_direction .camera_title{
	color: white;
	font-size: 15px;
	margin: 5% auto;
}
.direction_content{
	 width: 100%;
	 height: 70%;
	 position: relative;
}
.direction_div{
	position:relative;
	width: 30px;
	height: 30px;
}
.direction_div img{
	width: 100%;
	height:  100%;
}
/*left*/
.left_direction {
	top: 5%;
	left: 20%; 
}
/*bottom*/
.bottom_direction{
	top:5%;
	left: 40%;
}
/*right*/
.right_direction{
	top: -39%;
	left: 61%;
}
/*top*/
.top_direction{
	top: 2%;
	left: 40%; 
}