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

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

效果图：

html：

<!--调整摄像头方向-->
		<div class="change_camera_direction">
			<div class="camera_title">摄像头方向控制</div>
			<div class="direction_content">
				<div class="direction_div top_direction">
					<img class="camera_img_up" src="img/camera_up.png" />
				</div>
				<div class="direction_div left_direction">
					<img class="camera_img_left" src="img/camera_left.png" />
				</div>
				<div class="direction_div bottom_direction">
					<img class="camera_img_bottom" src="img/camera_down.png" />
				</div>
				<div class="direction_div right_direction">
					<img class="camera_img_right" src="img/camera_right.png" />
				</div>
			</div>
		</div>

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%; 
}