读书人

css兑现对话框箭头效果

发布时间: 2012-11-22 00:16:41 作者: rapoo

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

读书人网 >CSS

热点推荐