css兑现对话框箭头效果-HTML教程-爱易网页

css兑现对话框箭头效果

日期：2014-05-17　浏览次数：20528 次

css实现对话框箭头效果
用css实现对话框箭头效果 mark一下

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.test{
    width:300px; 
    top:20px;
    padding:30px 20px;
    border:5px solid #beceeb; 
    position:relative;
}
.test span{
    width:0; height:0; font-size:0;
    position:absolute;
}
.test span.bot{
    border-width:20px; 
    border-style:solid; 
    border-color:transparent transparent #beceeb; 
    left:80px; 
    top:-40px;
}
.test span.top{
    border-width:20px; 
    border-style:solid; 
    border-color:transparent transparent #ffffff; 
    left:80px; 
    top:-33px;
}
</style>
</head>
<body>
  
<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果二
</div>

</body>
</html>

在ie7/8上 overflow:hidden,border-style:dashed好像支持的不好，于是为了兼容性，把原文的这两条去掉，另外要重设一下margin-top。
原文出处 http://www.jb51.net/css/33743.html