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

最近做项目中，有一处的设计突出来一个尖尖角，最终还是用CSS搞定，顺便引申一下，这样的用法就可以做一些对话气泡了，虽然不是圆角，不过也能用 BT的方法去实现圆角，多加些标签就行，只是语义就差了，关键看使用的场影了吧，这里就不做圆角了。

直接看代码（本本上没装IE7+，仅测了IE6与FF）：

源代码

代码

<!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>