LMLPHP后院

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

maybe yes 发表于 2014-10-27 23:54
其实很早就想写一些有关前端方面的文章,但是由于时间太紧,工作太忙,总抽不出时间来写。关于前端,我想只要是对生活热爱的人都会喜欢。关于技术,我想到了两句话,都是传智播客的方立勋老师说的,第一句话是:“技术就是窗户纸”;第二句话是:“这个世界上,识货的人太少了”。有时候我发现技术其实是一种思想,并不在于技术本身。更深一步的说,技术的更高层次就是艺术。所以,有时候我特别的想用一些通俗的语言来表达它。而前端,更能体现这种艺术。
关于在网页实现箭头效果,很多网站直接使用图片,其实这是不理智的。能用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标签实现了箭头效果,如果需要调整元素位置的偏移,可以将上面代码的注释打开,调整到合适的位置(这里的位置偏移是指相对于父级中含有 position 属性值不为 static 元素节点的偏移)。如果要使用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>
有些网站的箭头效果是类似大于号“>”或者小于号“<”的形状,这样的箭头效果可以通过两个 SPAN 的叠加来实现。有关箭头的旋转问题,可以使用 CSS3 的一些属性,并不是所有浏览器都有效,本文将不再描述。
相关文章
评论列表
huanxi4u

非常喜欢这篇文章,讲的非常透彻,学到了...

LMLPHP,可爱滴WEB开发框架

2017-09-23 04:37:39 1506112659 0.004628