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

前端技术之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>