<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>气泡</title>
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style type="text/css">
.test{width:200px; padding:60px 60px; border:1px solid #CCCCCC; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
border-width: 11px;
border-style: solid dashed dashed;
border-color: transparent #CCCCCC transparent transparent;
left: -22px;
top: 15px;
}
.test span.top{
border-width: 11px;
border-style: solid dashed dashed;
border-color: transparent #ffffff transparent transparent;
left: -20px;
top: 15px;
}
</style>
</head>
<body>
<div class="demo">
<div class="test">
<span class="bot"></span>
<span class="top"></span>
气泡效果,css
</div>
</div>
</body>
</html>
效果: