文档章节

【转载】前端技术之DIV或SPAN+CSS实现箭头效果技术

hosser
 hosser
发布于 2015/01/25 14:47
字数 743
阅读 21
收藏 0

前端技术之DIV或SPAN+CSS实现箭头效果技术

maybe yes 发表于2014-10-27 23:54

原文链接 : http://blog.lmlphp.com/archives/12  来自 : LMLPHP后院

其 实很早就想写一些有关前端方面的文章,但是由于时间太紧,工作太忙,总抽不出时间来写。关于前端,我想只要是对生活热爱的人都会喜欢。关于技术,我想到了 两句话,都是传智播客的方立勋老师说的,第一句话是:“技术就是窗户纸”;第二句话是:“这个世界上,识货的人太少了”。有时候我发现技术其实是一种思 想,并不在于技术本身。更深一步的说,技术的更高层次就是艺术。所以,有时候我特别的想用一些通俗的语言来表达它。而前端,更能体现这种艺术。

关于在网页实现箭头效果,很多网站直接使用图片,其实这是不理智的。能用CSS技巧实现的效果,不到万不得已不要使用图片。我们在做网站的时候,最重要的指标就是速度,不能让用户等待,不能让用户看着浏览器在转圈圈。下面将详细描述如何使用SPAN标签实现箭头效果。

我 们都知道,HTML标签的元素都有边框属性,并且还可以对上下左右四个边框分别设置颜色和厚度。这样如果我们将元素的高度和宽度设置为0,边框厚度增大, 并且只显示一条边框,是不是就是一个三角形呢,不过这个三角形是等边直角三角形。纵然是等边直角三角形,但也基本符合了大多数情况下的箭头的需求了。这 里,需要注意的一个问题是浏览器的兼容。当今主流的新型浏览器都基本没有问题,但是仍然存在一部分用户使用的是IE6和IE7。为了兼容低版本的IE浏览 器,所以在写CSS的时候要特别的设置字体大小为0和overflow的属性为hidden。下面将举例实现,代码如下:

<style>
span.arrow{
	height:0px;
	width:0px;
	overflow:hidden;
	border-right:8px solid #666;
	font-size:0px;
	/*
	position:absolute;
	left:-10px;
	top:10px;
	*/
}
</style>

<span class="arrow"></span>

上面的例子使用 SPAN标签实现了箭头效果,如果需要调整元素位置的偏移,可以将上面代码的注释打开,调整到合适的位置。如果要使用DIV实现的话,可以将 display属性设置为inline-block;。非常重要的一点是,为了兼容,一定不要忘记加上float属性为left。如下代码示例:

<style>
div.arrow{
	height:0px;
	width:0px;
	overflow:hidden;
	border-right:8px solid #666;
	font-size:0px;
	display:inline-block;
	float:left;
	/*
	position:absolute;
	left:-10px;
	top:10px;
	*/
}
</style>

<div class="arrow"></div>


本文转载自:http://blog.lmlphp.com/archives/12

hosser
粉丝 194
博文 78
码字总数 4614
作品 3
徐汇
私信 提问
轨迹系列——WebGIS中使用ZRender实现轨迹前端动态播放特效

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在地图上以时间轴方式播放人员、车辆在地图上的历史行进轨迹。在之前的...

李晓晖
2017/04/16
0
0
jQuery实现点击图标div循环放大缩小功能

很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(...

祈澈菇凉
2018/09/12
0
0
轨迹系列12——单轨迹展示效果的进一步优化(流动箭头)

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 在PC端展示轨迹的探索中,我们分别针对轨迹纠正、单轨迹播放、多轨迹播放做了研究...

李晓晖
2018/07/13
0
0
基于OpenLayers+rbush实现高德轨迹样式

一 前言   近期翻阅博客,看到社区大神一休哥的一篇《canvas 奇巧淫技(二)绘制箭头路径效果》文章,同样,该大神还展示过一个使用rbush库如何在前端快速从海量数据进行空间检索的案例:h...

会哭的鳄鱼
2018/08/30
0
0
jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部

转自:http://blog.163.com/liufupanhao@126/blog/static/1284651702010894509982/ 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。 我知道很多人不同意我的观点...

大漠胡杨
2014/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
4分钟前
0
0
Spring系列教程六:AOP详细讲解

AOP 概述 什么是 AOP AOP:全称是 Aspect Oriented Programming 即:面向切面编程。 AOP技术是对OOP技术的一种延伸,AOP是面向纵向,OOP是面向横向。简单的说它就是把我们程序重复的代码抽取...

我叫小糖主
17分钟前
5
0
Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
38分钟前
3
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
今天
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部