css3 气泡对话框实例

代码如下：

<code class="language-html">


<meta charset="UTF-8">
<title>css3对话框设计</title>
<style>
.page{
    width:500px;
}
/* demo1 */
.demo1{
    border:2px solid #ccc;
	padding:10px;
	margin-bottom:20px;
	position:relative;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo1:before,.demo1:after{ 
	content:'';
	width:0;
	height:0;
	position:absolute;
}
.demo1:before{
    left:10px;
	bottom:-8px;
	border-top:8px solid #ccc;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
}
.demo1:after{
    left:12px;
	bottom:-6px;
	border-top:8px solid #fff;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
}
/* demo2 */
.demo2{
    border:2px solid #29B4F0;
	padding:10px;
	position:relative;
	margin-bottom:20px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo2:before{
	content:'';
	width:8px;
	height:8px;
	position:absolute;
	left:20px;
	bottom:-7px;
	background-color:#fff;
	border:2px solid #29B4F0;
	border-width: 0 2px 2px 0;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
/* demo3 */
.demo3{
    background-color:#B6F5FE;
	padding:10px;
	position:relative;
	margin-bottom:20px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo3:before,.demo3:after{ 
	content:'';
	width:0;
	height:0;
	position:absolute;
}
.demo3:before{
    left:10px;
	bottom:-18px;
	border-top:30px solid #B6F5FE;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	-webkit-transform:rotate(50deg);
	-moz-transform:rotate(50deg);
	-ms-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
/* demo4 */
.demo4{
    background-color:#82AF11;
	padding:10px;
	color:#fff;
	position:relative;
	text-shadow:0 -1px 1px rgba(0,0,0,.2);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo4:before{
    content:'';
	width:100px;
	height:20px;
	background-color:#82AF11;
	position:absolute;
	bottom:-20px;
	left:200px;
}
.demo4:after{
    content:'';
	width:50px;
	height:20px;
	background-color:#fff;
	position:absolute;
	bottom:-20px;
	left:200px;
	border-radius:0 20px 0 0;
}
.demo4 > :first-child:before{
     content:'';
	width:50px;
	height:20px;
	background-color:#fff;
	position:absolute;
	bottom:-20px;
	left:250px;
	border-radius:20px 0 0 0;   
}
</style>


  <div class="page">
    <h1 id="css-气泡对话框设计">css3气泡对话框设计</h1>
    <p class="demo1">ImagePlay 网站是一个快速的原型开发工具，可用于构建和测试图形处理算法，它配备了超过70多个图像处理器，可以组合成各种复杂的流程链接；该工具完全开源，可运行于windows、苹果、linux系统。<br>:before & after</p>
    <p class="demo2">How Long to Read 网站是由 Alexander Thorburn-Winsor 开发的一个在线测试一本书籍阅读完所需要的时间，帮助读者发现需要多长时间阅读的书籍，并提供读者量身定制的时间数据，方便用户通过阅读时间来查询适合自己阅读的书籍。<br>:before & :after</p>
    <p class="demo3">How Long to Read 网站的使用方法：读者输入一本书籍的名称，然后同简单的WPM(全称为words per minute，即每分钟多少个字的意思)来预测用户读书的速度，你可以发现阅读任何书籍的时候所需要多长时间完成，除了此功能外还可以使用该工具来搜索想要的书籍。<br>:before & :after</p>
    <section class="demo4"><p>Scr IM 网站是一个致力于把邮箱地址转换为短链接的在线工具，可以帮助拥有邮箱的用户避免垃圾邮件的骚扰，用户可以把转换为短链接的邮箱地址发布在公开的网络平台上。<br>:before & :after</p></section>
    
  </div>

</code>

效果：