[转]仅 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>
<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>
