[转]仅CSS的对话气泡效果

看到很好奇，想学习一下

转自：http://www.rainoina.com/raino/archive/413.html

 

代码 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="description" content="" />
<title></title>
<script type="text/javascript" src=""></script>
</head>
<body>
<style type="text/css">
body{
      padding:20px;
      font:12px/1.5 tahoma;
}
.bubble-box{
      background:#EEE;
      width:200px;
      height:60px;
      margin-bottom:30px;
}
.bubble-box .wrap{
      background:#EEE;

      /* 修正IE6 */
      _position:relative;
      _z-index:10;
}

/* arrow-effect */
.arrow-left{ border-left:20px solid #FFF;       border-top:20px solid #EEE; }
.arrow-right{ border-right:20px solid #FFF; border-top:20px solid #EEE; }
.arrow-top{ border-left:20px solid #EEE; border-top:20px solid #FFF; }
.arrow-bottom{ border-left:20px solid #EEE; border-bottom:20px solid #FFF; }

.arrow-left .wrap,
.arrow-right .wrap{
      width:180px;
      height:60px;
      padding:10px 10px 0;
      margin-top:-40px;
}

.arrow-top, .arrow-bottom{ width:140px; height:100px; }

.arrow-top .wrap,
.arrow-bottom .wrap{
      width:180px;
      height:90px;
      padding:10px 10px 0;
      margin-left:-40px;
}

</style>
<div class="bubble-box arrow-left">
      <div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>

<div class="bubble-box arrow-right">
      <div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>

<div class="bubble-box arrow-top">
      <div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>

<div class="bubble-box arrow-bottom">
      <div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>
</body>
</html>

 

 

 

posted @ 2010-03-20 11:15  雪霁霜飞  阅读(430)  评论(0)  编辑  收藏  举报