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

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相关推荐

动态加载html 添加样式表,使页面动态加载不同CSS样式表，从而实现不同风格模板的方法...
我们在制作网页时,有时会制作多种风格模板,而想把这些模板都用起来,而又不知道方法,通过以下两种方法,你就可以实现相同网站不同CSS模板的方法. ASP.Net中利用CSS实现多界面两种方法. 方法一: ...
使用HTML代码完成效果图，完成www.163.com账号注册页面（不要求做css样式，原生的HTML就好）
使用HTML代码完成效果图,完成www.163.com账号注册页面(不要求做css样式,原生的HTML就好) <!DOCTYPE html> <html><head> ...
html5css字体下划线,如何利用css样式做出文字的下划线？
如何利用css样式做出文字的下划线? 在将网页设计完成后,接下来就需要前端和后端工程师的配合,来将网页正式上线了.但是身为网页设计师,还是有必要掌握一些前段知识的,主要指html5和css3,在招聘网 ...
利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼成品效果图首先分析效果图图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成. 因此,我们应该写一个大的div盒子,来装这三个椭圆div,里面的三个椭圆div和圆的 ...
css图片横向压缩,【css样式生成图片合并压缩工具】Sprite，你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
通过CSS样式缩放图片导致图片模糊的解决方案
在进行前端页面开发的过程中,通过使用CSS对图片进行等比例缩放,存在会使图片失真的情形.这种情况有点违反我们的通常认知,毕竟放大图片会使图片失真这很正常,但是缩小图片通常应该会使图片变清晰才对.目前我 ...
html css分块,web学习第二课，HTML+CSS样式+div分块
---博客静态网页(项目实例) 今天我们需要完成的项目实例是一个带有图片的静态网页,区域布局分明. 做一个静态网页的步骤顺序: 网站整体布局分析设计导航与Banner的实现左侧列表的实现主体内容 ...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码. 今天我们共同学习一款"图文混排CSS列表&qu ...
Web实现：各种不同的CSS样式示例
字体大小: font-size: 12px; 字体粗细: font-weight: 200; font-weight: lighter; font-weight: 400; font-weight: ...
前端技巧|利用CSS属性修改图片颜色
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...

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

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

最新文章

热门文章