欢迎来到 jackNEss'窝窝
I like simple mind

纯CSS制作带小三角提示框

2011年08月21日

纯CSS制作带小三角提示框

前言

在我们开发项目的过程中,常常会遇到要制作一些 带小三角的提示框组件:

遇到这种需求我们一般会采取2种方法:

1. 把小三角切出来做成背景图,然后内容部分通过 border 和 background-color 实现;

2. 通过纯css方法将一个标签做成符合需求的小三角,然后内容部分通过border 和 background-color 实现;

理论上,上述这2种方法都是可行的,但是,有没有遇到以下的情景:
第一天, 客户已经确认设计稿了,可以开始制作,采用浅蓝色提示框方案。
第二天, 客户突然觉得,那蓝色好像不够大气,要求换成 浅黄色提示框。
第三天, 浅黄色做出来之后,客户又觉得出来的效果不太理想,要求换回浅蓝色。
第四天, 客户看着看着,觉得…那个小三角还是换个位置比较好,换为箭头向下吧。

如果你采用第一种方法的话,ok 第一天,爽yy地完成了这个组件,并觉得 easy job;第二天,ok,要修改了,打开你的切图工具,把那小箭头的颜色改为浅黄色,然后同名称覆盖文件,打开你的编辑器,修改相关样式;第三天,再一次打开你的切图工具,把图片颜色换回来,然后同名覆盖,并修改相关样式;第四天,恭喜,打开你的切图工具,旋转一下你的小三角,然后继续之前的步骤。

有没有觉得很烦呢,老是得打开那个切图工具,多没效率呀,不过那也是其次,关键是…

在一个网页中,每多一张图片就会多一个http请求,请求数越多,自然而然地,网页打开的速度就会越慢,第一种方法用的是背景图,无疑就是增加了那个请求数,所以基于主观和客观的原因,我是推荐采用 纯css来实现滴。

使用纯Css制作带小三角的提示框组件

使用纯css来实现这个需求,有2种方法:

1. 通过 定义样式使一个标签变为 三角形,从而满足需求。

2. 通过一个特殊字符 “◆” 来实现这个需求。

我都会在这里介绍一下这2种方法。

1. 通过 定义样式使一个标签变为 三角形,其实就是根据border的边与边之间空间平分的特性来实现的,下面先贴一下html代码

<div class="tipsArea">
  <!-- 左上 小三角 -->
  <i class="tri_tl"></i>
  <i class="tri_tl_b"></i>
  <!--//左上 小三角-->
	
  <div class="trips_content">欢迎来到 www.jackNEss.org</div>
</div>

上面代码中 .tri_tl, .tri_tl_b 都是用来构造小三角的标签,为什么需要2个呢,是因为其中一个是用来放在另一个的后面并扫尾突出1px来模拟那个边框来着。

下面贴一下对应 小三角部分 的css样式

.tri_tl{ 
  position:absolute;
   top:-12px; 
  left:10px; 
  z-index:2; 
  display:block; 
  width:0; 
  height:0; 
  border:6px solid; 
  border-color: transparent transparent #dcf4ff transparent; 
  _filter:chroma(color=black); 
  overflow:hidden;
}

.tri_tl_b{ 
  position:absolute; 
  top:-13px; 
  left:10px; 
  z-index:1; 
  display:block; 
  width:0; 
  height:0; 
  border:6px solid; 
  border-color: transparent transparent #7ecef4 transparent; 
  _filter:chroma(color=black); 
  overflow:hidden;
}

需要说一下的是,这种方法,由于鸡肋的IE6 border-color 不支持 transparent(颜色透明),所以只能调用 IE的私有滤镜 filter:chroma(color=XXX)来解决,至于为什么这样可以构建出一个三角形出来呢,我在这里就不一一说明了,有兴趣可以google一下,最好就亲自动手一下喇,哈哈,实践出真知嘛。

再来贴完整的例子代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带箭头小标签</title>
<style type="text/css">
*{ margin:0; padding:0;}
.tipsArea{ 
  position:relative; 
  width:200px; 
  padding:10px; 
  margin:50px; 
  border:1px solid #7ecef4; 
  background:#dcf4ff; 
  font-size:12px; 
  font-family:'\5b8b\4f53', sans-serif;
}
.tips_content{ line-height:1.5em; }

.tri_tl{ 
  position:absolute; 
  top:-12px; 
  left:10px; 
  z-index:2; 
  display:block; 
  width:0; 
  height:0; 
  border:6px solid; 
  border-color: transparent transparent #dcf4ff transparent;
  _filter:chroma(color=black); 
  overflow:hidden;
}

.tri_tl_b{ 
  position:absolute; 
  top:-13px; 
  left:10px; 
  z-index:1;
  display:block; 
  width:0; 
  height:0; 
  border:6px solid; 
  border-color: transparent transparent #7ecef4 transparent; 
  _filter:chroma(color=black); 
  overflow:hidden;
}
</style>
</head>

<body>

<div class="tipsArea">
  <!-- 左上 小三角 -->
  <i class="tri_tl"></i>
  <i class="tri_tl_b"></i>
  <!--//左上 小三角-->
		
  <div class="trips_content">欢迎来到 www.jackNEss.org</div>
</div>

</body>
</html>

2. 通过一个特殊的字符来满足这个需求。

这个字符是:“◆” 菱型字符,支持所有编码包括 gbk,gb2312,utf-8等,
嘛不过不支持也不怕,这个的 转义符是 “&#9670”

如何实现呢,首先先贴一下之前的效果图:

然后如果用这个方法实现之后的话呢,其实是这么一回事的


这样的话,应该明白怎么弄了吧,下面我就直接贴一下完整的html代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带箭头小标签</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
.tipsArea{ 
  position:relative; 
  width:200px; 
  padding:10px; 
  margin:50px; 
  border:1px solid #7ecef4; 
  background:#dcf4ff; 
  font-size:12px; 
  font-family:'\5b8b\4f53', sans-serif;
}
.tips_content{ line-height:1.5em; }
.tipsArea .tri_tl,
.tipsArea .tri_tl_b,
.tipsArea .tri_tr,
.tipsArea .tri_tr_b,
.tipsArea .tri_bl,
.tipsArea .tri_bl_b,
.tipsArea .tri_br,
.tipsArea .tri_br_b{ 
  position:absolute; 
  display:block; 
  width:1em; 
  height:1em; 
  line-height:1.2em; 
  font-style:normal;
  overflow:hidden;
}

.tipsArea .tri_tl,
.tipsArea .tri_tr,
.tipsArea .tri_bl,
.tipsArea .tri_br{ color:#dcf4ff; z-index:2;}

.tipsArea .tri_tl_b,
.tipsArea .tri_tr_b,
.tipsArea .tri_bl_b,
.tipsArea .tri_br_b{ color:#7ecef4; z-index:1;}

.tipsArea .tri_tl{ top:-0.5em; left:10px;}
.tipsArea .tri_tl_b{ top:-7px; left:10px;}

.tipsArea .tri_tr{ top:10px; right:-0.5em;}
.tipsArea .tri_tr_b{ top:10px; right:-7px;}

.tipsArea .tri_bl{ bottom:10px; left:-0.5em;}
.tipsArea .tri_bl_b{ bottom:10px; left:-7px;}

.tipsArea .tri_br{ bottom:-0.5em; right:10px;}
.tipsArea .tri_br_b{ bottom:-7px; right:10px; }
-->
</style>
</head>

<body>

<div class="tipsArea">
  <!-- 左上 小三角 -->
  <i class="tri_tl">◆</i>
  <i class="tri_tl_b">◆</i>
  <!--//左上 小三角-->
	
  <!-- 右边小三角 -->
  <i class="tri_tr">◆</i>
  <i class="tri_tr_b">◆</i>
  <!--//右边小三角-->
	
  <!-- 左边小三角 -->
  <i class="tri_bl">◆</i>
  <i class="tri_bl_b">◆</i>
  <!--//左边小三角-->
	
  <!-- 下边小三角 -->
  <i class="tri_br">◆</i>
  <i class="tri_br_b">◆</i>
  <!--//下边小三角-->
	
  <div class="trips_content">欢迎来到 www.jackNEss.org</div>
</div>

</body>
</html>


这两种方法各有什么好处和不足呢,我在这里说一下:

第2种方法实现出来相对比较简单些,但最重要的是可以免去了使用 ie的滤镜,免去了ie滤镜对于网页性能上的危害,不过也有他的局限性,局限性就是,这个“◆” 的大小不能小于 12px,为什么,因为 chrome浏览器限制了 中文字体不得小于12px,就是说 你如果小于12px的话,会强制地将你字体变为12px…所以,那小三角形不是想多小就多小滴;
然后第1种方法咯,不足就是 ie6浏览器要依赖 滤镜才能实现,但是能自由地设置小三角形的大小。

 

  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS