web页面左右双向箭头(利用CSS样式和图片)——20181130

1、显示效果：（CSS样式）

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
<style>
.arrowLeft{                        /*整个箭头容器*/
	width:40px;
    height:10px;
    display: inline-block;
    position: relative;             /*相对定位*/
}
.arrowLeft:before,.arrowLeft:after{
    content: '';
    border-color: transparent;       /*伪元素边框颜色为透明*/
    border-style: solid;
    position: absolute;               /*伪元素绝对定位*/
}
.arrowLeft:after{                   /*箭头尾部的矩形*/
    width: 60%;
    height: 2%;
    background-color:#D3D3D3;
    top: 5px;
    left: 0;
}
.arrowLeft:before{                 /*箭头三角形*/
    border-right-color:#D3D3D3;
    border-width: 7px;/*箭头的大小*/
    left: -13px;
    top: 2px;
}

.arrowRight{                        /*整个箭头容器*/
	width:40px;
    height:10px;
    display: inline-block;
    position: relative;             /*相对定位*/
    top: -9px;
}
.arrowRight:before,.arrowRight:after{
    content: '';
    border-color: transparent;       /*伪元素边框颜色为透明*/
    border-style: solid;
    position: absolute;               /*伪元素绝对定位*/
}
.arrowRight:after{                   /*箭头尾部的矩形*/
    width: 60%;
    height: 2%;
    background-color:#D3D3D3;
    top: 5px;
    left: 0;
}
.arrowRight:before{                 /*箭头三角形*/
    border-left-color:#D3D3D3;
    border-width: 7px;
    left: 28px;
    top: 2px;
}
</style>
</head>

<body >

<div>
  <div id="arrowLeft" class="arrowLeft"></div></br>
  <div id="arrowRight" class="arrowRight"></div>
</div>

</body>
</html>

2、显示效果（CSS样式）


<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
<style>
.arrowLeft{                       /*整个箭头容器*/
	width:40px;
	height:10px;
	display: inline-block;
	position: relative;             /*相对定位*/
}
.arrowLeft:before,.arrowLeft:after{
	content: '';
	border-color: transparent;       /*伪元素边框颜色为透明*/
	border-style: solid;
	position: absolute;               /*伪元素绝对定位*/
}
.arrowLeft:after{                   /*箭头尾部的矩形*/
	width: 60%;
	height: 3%;
	background-color:#D3D3D3;
	top: 5px;
	left: 0;
}
.arrowLeft:before{                 /*箭头三角形*/
	border-right-color:#D3D3D3;
	border-width: 8px;
	left: -15px;
	top: 0;
}
.arrowRight{                        /*整个箭头容器*/
	display: inline-block;
	position: relative;             /*相对定位*/
}
.arrowRight:before{
	content: '';
	border-color: transparent;       /*伪元素边框颜色为透明*/
	border-style: solid;
	position: absolute;               /*伪元素绝对定位*/
}
.arrowRight:before{                 /*箭头三角形*/
	border-left-color:#D3D3D3;
	border-width: 8px;
	left: 25px;
	top: -31px;
}
</style>
</head>

<body >

<div>
  <div id="arrowLeft" class="arrowLeft"></div></br>
  <div id="arrowRight" class="arrowRight"></div>
</div>

</body>
</html>

3、显示效果（图片：参考百度地图）

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
<style>
.routebox-revert-icon {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 18px;
    height: 14px;
    background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/revert_9adb172.png);
</style>
</head>

<body >

<div class="routebox-revert-icon"></div>

</body>
</html>

web页面左右双向箭头(利用CSS样式和图片)——20181130

猜你喜欢