css border 圆角气泡案例

最新推荐文章于 2024-07-23 16:14:20 发布

weixin_30566063

最新推荐文章于 2024-07-23 16:14:20 发布

阅读量277

点赞数

原文链接：http://www.cnblogs.com/dafuxueyuan/p/8478988.html

版权

直接粘贴走，打开页面看即可！！！

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test1 {
width: 0;
height: 0;
line-height: 0px;
font-size: 0px;
border-width: 20px 10px;
border-style: solid;
border-color: #ff3300 #ffffff;
border-color: #ff3300 #ff3300 #ffffff #ffffff;
}
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #fff #fff #fff;}
.box{width:500px;}
.top{border-bottom:3px solid; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.org_box {
height: 50px;
line-height: 50px;
width: 500px;
background-color: pink;
padding-left: 2em;
position: relative;
}
.org_bot_cor {
height: 0;
width: 0;
line-height: 0;
font-size: 0px;
border-width:20px 15px ;
border-style: solid;
border-color: pink transparent transparent transparent;
position: absolute;
bottom:-40px;
left:50px;
}
.org_box1{
height:80px;
line-height:80px;
margin-bottom:30px;
padding-left:2em;
background:#F3961C;
position:relative;
}
.org_bot_cor_2{
height: 0;
width: 0;
line-height: 0;
font-size: 0px;
border:20px solid ;
border-color: #F3961C transparent transparent transparent;
position: absolute;
bottom:-40px;
left:50px;
left:60px;
bottom:-40px;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<br><br><br>
<div class="box">
<div class="top"></div>
<div class="center">我是一只小小鸟、小小鸟！</div>
<div class="bot"></div>
</div>
<br><br><br>
<div class="org_box">
<span class="org_bot_cor"></span>
边框法实现底部90度尖角对话框
</div>
<br><br><br>
<div class="org_box1">
<span class="org_bot_cor_2"></span>
字符法实现底部90度尖角对话框
</div>

<br><br><br>
<br><br><br>
<style>
.org_box3{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.org_box3 span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.org_box3 span.org_bot_cor_3{
border-width:20px;
border-style:solid;
border-color:#ffffff #beceeb #beceeb #ffffff;
left:-40px;
top:40px;
}
.org_box3 span.org_top_cor_3{
border-width:10px 20px;
border-style:dashed solid solid dashed;
border-color:transparent #ffffff #ffffff transparent;
left:-40px;
top:60px;
}
</style>
<div class="org_box3">
<span class="org_bot_cor_3"></span>
<span class="org_top_cor_3"></span>
CSS “边框法”实现气泡对话框效果一
</div>
<br><br><br>
<br><br><br>
<style>
.org_box4{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.org_box4 span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.org_box4 span.org_bot_cor_4{
border-width:20px;
border-style:solid dashed dashed;
border-color:#beceeb transparent transparent;
left:80px;
bottom:-40px;
}
.org_box4 span.org_top_cor_4{
border-width:20px;
border-style:solid dashed dashed;
border-color:#ffffff transparent transparent;
left:80px;
bottom:-33px;
}
</style>
<div class="org_box4">
<span class="org_bot_cor_4"></span>
<span class="org_top_cor_4"></span>
CSS “边框法”实现气泡对话框效果二
</div>
</body>
</html>