纯CSS气泡对话框
2013-04-07 09:18
218 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.org_box{width:500px; height:80px; line-height:40px; margin:40px auto; padding-left:2em; background:#F3961C;font-size:12px; position:relative; }
.org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }
.cor1{border-width:20px;border-color:#f3961c transparent transparent transparent;left:60px; bottom:-40px;}
.cor2{border-width:20px;border-color:transparent #f3961c transparent transparent;left:-40px; bottom:30px;}
.cor3{border-width:20px;border-color:transparent transparent #f3961c transparent;left:80px; top:-40px;}
.cor4{border-width:20px;border-color:transparent transparent transparent #f3961c;right:-40px; bottom:30px;}
.cor5{border-width:20px 10px;border-color:#f3961c #f3961c transparent transparent;left:60px; bottom:-40px;}
.cor6{border-width:20px 10px;border-color:#f3961c transparent #f00 transparent;left:-40px; bottom:30px;}
.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}
.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}
.box1{height:40px;background:#000;position:relative;}
.corner{width:0;height:0;font-size:0;border-width:20px 20px 20px;border-style:solid;border-color:#f00 transparent #f00 #f00 ;_border-color: #f00 white white white ;position:absolute;left:0;bottom:0;overflow:hidden;}
</style>
</head>
<body>
<div class="org_box"> <span class="org_box_cor cor1"></span>上边框有颜色,所以箭头冲下,定位的负值是边框宽度的2倍，宽度只有一个值，是等边三角形.要专门给IE6写HACK，将对应的transparent改为white.（以下省略这句描述）。 </div>
<div class="org_box"> <span class="org_box_cor cor2"></span>右边框有颜色值,所以箭头冲左 </div>
<div class="org_box"> <span class="org_box_cor cor3"></span>下边框有颜色,所以箭头冲上</div>
<div class="org_box"> <span class="org_box_cor cor4"></span>左边框有颜色,所以箭头冲右 </div>
<div class="org_box"> <span class="org_box_cor cor5"></span>上，右有颜色值，（宽度有两个值且不等，大家可以任意排列组合，图案很丰富） </div>
<div class="org_box"> <span class="org_box_cor cor6"></span>上，下颜色值（颜色值不一样，有惊喜,沙漏？高脚杯）</div>
<div class="org_box"> <span class="org_box_cor cor7"></span>右下有颜色值</div>
<p style="color:#f00;">三个颜色值，有时也能用上,同样，改变颜色值顺序，开口方向不同。</p>
<div class="box1"><em class="corner"></em>地方了宋德福</div>
</body>
</html>
//带边框的气泡框
样式：
<style type="text/css">
.rules_cont .rules_com {
background: none repeat scroll 0 0 #fff6f1;
border: 1px solid #f06405;
padding: 5px;
position: absolute;
right: -168px;
top: -6px;
width: 175px;
right: 108px;
top: -6px;
}
.rules_cont .rules_com {
background: none repeat scroll 0 0 #fff6f1;
border: 1px solid #f06405;
padding: 5px;
position: absolute;
right: 108px;
top: -6px;
width: 175px;
}
.rules_cont .rules_com .tri_left {
height: 18px;
right: -180px;
position: relative;
top: 5px;
width: 18px;
}
.rules_cont .rules_com .tri_left .arrow1 {
border-color: transparent transparent transparent #f06405;
border-style: dashed dashed dashed solid;
border-width: 9px;
display: inline-block;
height: 0;
overflow: hidden;
position: absolute;
width: 0;
}
.rules_cont .rules_com .tri_left .arrow2 {
border-color: transparent transparent transparent #fff6f1;
border-style: dashed dashed dashed solid;
border-width: 9px;
display: inline-block;
height: 0;
right: 1px;
overflow: hidden;
position: absolute;
width: 0;
}
</style>
html:
<div class="rules">
<p class="rules_L">查看规则</p>
<div class="rules_cont">
<div class="rules_com" style="margin-top:10px;">
<div class="tri_left">
<b class="arrow1"></b>
<b class="arrow2"></b>
</div>
<p class="L_bold">查看规则</p>
<p class="L_detail">
积分夺宝： 是一种在规定的时间内用积分参与商品抢拍，出积分最高者获得此商品的游戏。<br>
1、积分夺宝活动需报名参与，一次性收取报名费（EP）不限制出价次数；<br>
2、积分夺宝出积分最高的获胜者用出价积分获得此商品，如积分不足可用现金支付，支付比例1EP=1元；<br>
3、积分夺宝商品不支持退款、退货操作，只支持换货操作；
4、订单配送过程中可能产生的配送费用需要支付。
</p>
</div>
</div>
</div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.org_box{width:500px; height:80px; line-height:40px; margin:40px auto; padding-left:2em; background:#F3961C;font-size:12px; position:relative; }
.org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }
.cor1{border-width:20px;border-color:#f3961c transparent transparent transparent;left:60px; bottom:-40px;}
.cor2{border-width:20px;border-color:transparent #f3961c transparent transparent;left:-40px; bottom:30px;}
.cor3{border-width:20px;border-color:transparent transparent #f3961c transparent;left:80px; top:-40px;}
.cor4{border-width:20px;border-color:transparent transparent transparent #f3961c;right:-40px; bottom:30px;}
.cor5{border-width:20px 10px;border-color:#f3961c #f3961c transparent transparent;left:60px; bottom:-40px;}
.cor6{border-width:20px 10px;border-color:#f3961c transparent #f00 transparent;left:-40px; bottom:30px;}
.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}
.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}
.box1{height:40px;background:#000;position:relative;}
.corner{width:0;height:0;font-size:0;border-width:20px 20px 20px;border-style:solid;border-color:#f00 transparent #f00 #f00 ;_border-color: #f00 white white white ;position:absolute;left:0;bottom:0;overflow:hidden;}
</style>
</head>
<body>
<div class="org_box"> <span class="org_box_cor cor1"></span>上边框有颜色,所以箭头冲下,定位的负值是边框宽度的2倍，宽度只有一个值，是等边三角形.要专门给IE6写HACK，将对应的transparent改为white.（以下省略这句描述）。 </div>
<div class="org_box"> <span class="org_box_cor cor2"></span>右边框有颜色值,所以箭头冲左 </div>
<div class="org_box"> <span class="org_box_cor cor3"></span>下边框有颜色,所以箭头冲上</div>
<div class="org_box"> <span class="org_box_cor cor4"></span>左边框有颜色,所以箭头冲右 </div>
<div class="org_box"> <span class="org_box_cor cor5"></span>上，右有颜色值，（宽度有两个值且不等，大家可以任意排列组合，图案很丰富） </div>
<div class="org_box"> <span class="org_box_cor cor6"></span>上，下颜色值（颜色值不一样，有惊喜,沙漏？高脚杯）</div>
<div class="org_box"> <span class="org_box_cor cor7"></span>右下有颜色值</div>
<p style="color:#f00;">三个颜色值，有时也能用上,同样，改变颜色值顺序，开口方向不同。</p>
<div class="box1"><em class="corner"></em>地方了宋德福</div>
</body>
</html>
//带边框的气泡框
样式：
<style type="text/css">
.rules_cont .rules_com {
background: none repeat scroll 0 0 #fff6f1;
border: 1px solid #f06405;
padding: 5px;
position: absolute;
right: -168px;
top: -6px;
width: 175px;
right: 108px;
top: -6px;
}
.rules_cont .rules_com {
background: none repeat scroll 0 0 #fff6f1;
border: 1px solid #f06405;
padding: 5px;
position: absolute;
right: 108px;
top: -6px;
width: 175px;
}
.rules_cont .rules_com .tri_left {
height: 18px;
right: -180px;
position: relative;
top: 5px;
width: 18px;
}
.rules_cont .rules_com .tri_left .arrow1 {
border-color: transparent transparent transparent #f06405;
border-style: dashed dashed dashed solid;
border-width: 9px;
display: inline-block;
height: 0;
overflow: hidden;
position: absolute;
width: 0;
}
.rules_cont .rules_com .tri_left .arrow2 {
border-color: transparent transparent transparent #fff6f1;
border-style: dashed dashed dashed solid;
border-width: 9px;
display: inline-block;
height: 0;
right: 1px;
overflow: hidden;
position: absolute;
width: 0;
}
</style>
html:
<div class="rules">
<p class="rules_L">查看规则</p>
<div class="rules_cont">
<div class="rules_com" style="margin-top:10px;">
<div class="tri_left">
<b class="arrow1"></b>
<b class="arrow2"></b>
</div>
<p class="L_bold">查看规则</p>
<p class="L_detail">
积分夺宝： 是一种在规定的时间内用积分参与商品抢拍，出积分最高者获得此商品的游戏。<br>
1、积分夺宝活动需报名参与，一次性收取报名费（EP）不限制出价次数；<br>
2、积分夺宝出积分最高的获胜者用出价积分获得此商品，如积分不足可用现金支付，支付比例1EP=1元；<br>
3、积分夺宝商品不支持退款、退货操作，只支持换货操作；
4、订单配送过程中可能产生的配送费用需要支付。
</p>
</div>
</div>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 纯css实现气泡对话框尖角处理
- CSS绘制无图片的气泡对话框
- CSS使用菱形◆制作气泡对话框(兼容IE6 IE9)
- css实现气泡对话框
- css实现气泡对话框-Demo
- css模拟气泡对话框
- 辛星和您一起手写CSS气泡
- CSS气泡框的两种实现
- javascript操作css实现弹出对话框
- 纯CSS代码实现各类气球泡泡对话框效果
- day14 Python Css对话框
- css制作对话框
- js+div+css 模拟弹出对话框
- CSS3圆角气泡框，评论对话框
- 制作css气泡框
- 纯CSS气泡框实现方法探究
- 实现弹出动态气泡对话框
- 气泡小角的css实现
- 分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容
- [转]仅 CSS的对话气泡效果