css实现对话框箭头效果

最新推荐文章于 2024-06-28 09:43:34 发布

nailsea

最新推荐文章于 2024-06-28 09:43:34 发布

阅读量769

点赞数

分类专栏：前端css 文章标签： css

本文链接：https://blog.csdn.net/nailsea/article/details/84355222

版权

前端css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用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

nailsea

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现对话框箭头效果

用css实现对话框箭头效果 mark一下[code="java"]JS Bin.test{ width:300px; top:20px; padding:30px 20px; border:5px solid #beceeb; position:relative;}.test span{ w...
复制链接

扫一扫

专栏目录