首页 > 代码库 > css 實現微信聊天類似的氣泡
css 實現微信聊天類似的氣泡
要實現這樣的效果
代碼如下:
---------------------------------------
<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 實現微信聊天類似的氣泡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。