css实现对话框箭头效果

m47cat · 发表于 2013-2-8 00:46:08

用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

		自动登录	找回密码
密码			立即注册