CSS “边框法”实现气泡对话框效果的高级应用实例页面

代码:

CSS代码:
.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#beceeb transparent transparent; 
    left:80px; 
    bottom:-40px;
}
.test span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#ffffff transparent transparent; 
    left:80px; 
    bottom:-33px;
}
                
HTML代码:
<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果二
</div>
                

效果:

CSS “边框法”实现气泡对话框效果二