辛星和您一起手写CSS气泡

浏览数：14 / 时间：2015年06月09日

上文中我发布了一篇手写导航条的博客，那么这一篇博客我将和大家一起手写气泡，那么什么是气泡呢？先给那些刚入门的童鞋一个截图，来更好的认识一下什么是气泡把：

这就是一个简单的气泡啦，那么它主要用来干什么呢？他可以用来当我们点击某段文字的时候再显示出来，当然，这个可能需要用到Javascript的知识，我们先不提了，我们这里先给大家看一下如何去做一个CSS气泡把。

我们先分析一下思路，它的实现无非就是一个矩形的边框，然后下面是一个三角形，但是这个三角形是一个镂空的，也就是是一个空心三角形，并且它还是一个只有两条边的三角形，那么我们先来看一下如何去做出来这个三角形，其实实现这个三角形还是蛮简单的，我先给出代码，然后给出解释：

<html>
<head>
<style type="text/css">
	#demo{width: 0px;height: 0px;border-width: 75px;border-style:solid;border-color:#F00  transparent transparent; }


</style>
</head>
<body>
<div id = "demo"></div>
</body>
</html>

上面这段代码大家去运行的话，发现只有一个红色的倒立的三角形，效果图如下：

那么它是如何实现的呢？首先我们创建了一个div，然后设置其id为demo，然后我们在css中把它的宽度和高度都设置为0，把边框设置为75像素，这一点很关键，即其实我们是看不到它的内容的，我们所看到的只有它的边框，而它的四个边框的颜色都是红色的，但是就但是在，它的下边框和左右边框都是透明的，因此，我们就只能看到上边框了，也就是我们只能看到一个倒立的三角形，看不到整个的矩形区域了，这就是这个三角形的实现原理，如果大想要做出来向右的三角形，可以自己写一写试试奥。

第一步，我们先写一个my.html文件，内容如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>辛星手写CSS气泡</title>
	<link rel="stylesheet" type="text/css" href="xing.css">
</head>
<body>
<div class="tag">
 <div class="arrow">
     <em></em><span></span>
    </div>
    辛星CSS手写气泡
</div>
</body>
</html>

第二步，我们新建一个xing.css文件，开始我们的css编辑工作，我们要在em中实现这个三角形，然后用span去镂空它，因此我们的tag来实现文本显示，我们用下面的arrow来实现箭头，我们先写tag的样式：

.tag{ width:300px; height:100px;
	 border:5px solid #09F; position: relative;
	 background-color:#FFF;
}

第三步，我们开始写下面的这个箭头，我们就需要用到em这个标签了，在写之前，有一个问题：那就是它的布局怎么办，这里我们采用绝对布局，关于绝对布局，如果大家不清楚，可以翻翻我前面的教程，里面有讲解。关于如何实现这个箭头，上面也有讲解，如果读者不清楚，可以跟着代码多敲敲，试验几遍，我们添加后的代码如下：

.tag{ width:300px; height:100px;
	 border:5px solid #09F; 
	 background-color:#FFF;
}
.tag em{display:block; border-width:20px; 
	position:absolute; bottom:-40px; left:100px;
	border-style:solid ; 
	border-color:#09F transparent transparent;
}

第四步，可能有童鞋会感觉有问题，刷新界面之后这个下拉箭头没有实现，那又是什么原因呢？这就是我们在一个子元素中使用绝对布局的话，如果父元素中没有指定布局模式，那么子元素就会相对于body进行定位，在body的下面40个像素，当然什么都不会看到了，于是我们在tag中变化代码如下，即添加它的定位属性，变化后的代码如下：

.tag{ width:300px; height:100px;
	 border:5px solid #09F; position: relative;
	 background-color:#FFF;
}
.tag em{display:block; border-width:20px; 
	position:absolute; bottom:-40px; left:100px;
	border-style:solid ; 
	border-color:#09F transparent transparent;
}

此时，让我们来看一下效果把：

其实，此时已经可以说是一个气泡了，如果读者要求不高的话，现在已经可以打完收工了。

第五步，进一步的修饰，其实这个时候就很简单了，我们下面的span几乎就是照抄上面的em标签，我们只需要让该元素的向下的箭头是一个白色的三角形就Ok了，因此添加之后的代码如下：

.tag{ width:300px; height:100px;
	 border:5px solid #09F; position: relative;
	 background-color:#FFF;
}
.tag em{display:block; border-width:20px; 
	position:absolute; bottom:-40px; left:100px;
	border-style:solid ; 
	border-color:#09F transparent transparent;
}
.tag span{display:block; border-width:20px;
 position:absolute; bottom:-33px; left:100px;
 border-style:solid ; 
	border-color:#FFF transparent transparent;
}

好啦，我们来看一下效果：