码迷,mamicode.com
首页 > 微信 > 详细

css 實現微信聊天類似的氣泡

时间:2017-04-20 22:43:40      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:ges   height   color   hidden   bsp   top   --   span   das   

要實現這樣的效果

技术分享

 

代碼如下:

---------------------------------------

<style>
.test{width:300px; padding:30px 20px; margin-left:60px; margin-top:100px; background:#beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid; 
    border-color:#ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}
.test span.top{
    border-width:10px 20px; 
    border-style:dashed solid solid dashed; 
    border-color:transparent #ffffff #ffffff transparent; 

    left:-40px; 
    top:60px;
}
.fly1{
 
 border-width:20px;
 border-style: solid solid solid solid;
 border-color:#fff #beceeb #beceeb #fff;
 position: absolute;
  left: 100px;
  top: -40px;

}
.fly2{
 border-width:20px 10px;
 border-style:solid;
 border-color:transparent #ffffff #ffffff transparent;
 position: absolute;
 left:140px;
 top: -40px;
}
</style>
<div class="test">
    <div class="fly1"></div>
    <div class="fly2"></div>
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一

</div>

 

css 實現微信聊天類似的氣泡

标签:ges   height   color   hidden   bsp   top   --   span   das   

原文地址:http://www.cnblogs.com/oxspirt/p/6741129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!