页面中三角和气泡窗口的写法
2015-09-10 18:42
585 查看
.container{margin:50px auto; width: 800px; text-align: center;background: #ccc;} //大的轮廓div
.con-arrow{ //内层div
position: relative;
background: #88b7d5;
padding: 40px;
width: 280px;
height: 100px;
border-radius: 10px;}
.con-arrow:after{
position: absolute;
right: 100%;
top:50%;
margin-top: -15px;
content: '';
border:30px solid;
border-color:transparent #88b7d5 transparent transparent ;
}
</head>
<body>
<div class="container"> //外层div
<div class="con-arrow">asdf</div> //内层窗口div
</div>
.con-arrow{ //内层div
position: relative;
background: #88b7d5;
padding: 40px;
width: 280px;
height: 100px;
border-radius: 10px;}
.con-arrow:after{
position: absolute;
right: 100%;
top:50%;
margin-top: -15px;
content: '';
border:30px solid;
border-color:transparent #88b7d5 transparent transparent ;
}
</head>
<body>
<div class="container"> //外层div
<div class="con-arrow">asdf</div> //内层窗口div
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- odoo 配置文件openerp-server.conf详解 (openerp)
- <head first...>读书笔记
- [LeetCode]题解（python）：007-Reverse Integer
- win7安装virtualbox遇到的问题
- J2EE平台的13种核心技术
- 浅论ajax跨域！从一个例子开始！
- 中国杀毒软件发展史
- 0022 sql 必会的基本操作
- js老生常谈之this,constructor ,prototype
- Android之SurfaceView学习（一）转转
- TestLink与Mantis
- BestCoder Round #49 ($) HDU 5339 Untitled(1001)
- iOS开发-Xcode Debug、Release、Archive、Profile、Analyze概念解释
- 9-9课堂笔记
- Java内部类详解
- springMVC3得知(五岁以下儿童)--MultiActionController
- 字符
- onContextItemSelected 用法
- fix bug: cannot build OpenCV 2.4.11 with CUDA 7.0
- hdu 4007 Dave（线性探查+枚举）