CSS模拟微信对话框

通过border来实现小三角形，模拟微信的对话框：

<div class="left"><p>你好，我是卖茶叶的</p>
</div>
<div class="right"><p>你好，我是种茶的</p>
</div>

其中，CSS这样设置：

.left,.right{min-height: 60px;position: relative;left: 10px;display: table;text-align: center;border-radius: 7px;background-color:#9EEA6A;
}
.right{      /*使左右的对话框分开*/top: 20px;left: 150px;background-color: #FC3;
}
.left > p,.right > p{    /*使内容居中*/display: table-cell;vertical-align: middle;padding: 0 10px;
}
.left:before,.right:after{   /*用伪类写出小三角形*/content: '';display: block;width: 0;height: 0;border: 16px solid transparent;position: absolute;top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{    border-right: 16px solid #9EEA6A;left: -30px;
}
.right:after{    border-left: 16px solid #FC3;right: -30px;
}

CSS模拟微信对话框相关推荐

CSS如何实现小箭头及模拟微信对话框样式
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CS ...
CSS实现微信对话框
转载于:https://my.oschina.net/u/3953786/blog/2875637
[前端] html入门练手——微信对话框
html入门练手--微信对话框效果图 css部分 html部分待解决问题刚入门html,学到了元素的动态布局,就试试看,写得很死很烦,慢慢来吧. 效果图 css部分气泡框部分参考CSS实现微信 ...
请在微信客户端打开链接：火狐浏览器模拟微信浏览器内核教程，用chrome模拟微信浏览器访问需要OA…....
背景:微信浏览器能访问,出现,请在微信客户端打开链接. user agent switcher for firefox: https://addons.mozilla.org/en-US/firefo ...
JS+HTML+CSS模仿微信界面发送信息
JS+HTML+CSS仿微信聊天界面前端新人又来报道咯欢迎大家指教功能: 1.点击头像可以模拟切换用户. 2.输入信息,点击发送可以显示在屏幕上. 3.新信息在上方,旧信息在下方,方便有滚动条的 ...
模拟微信接口时，提示“请在微信客户端打开链接”(转)
背景描述相信有模拟微信页面请求的测试都有看到过这个页面,简单点说就是爬虫爬微信页面,进行回放的时候会出现这个页面.大概在1年前,专门安排了一个人去解决这个技术问题,遗憾的是当时没有找到解决方案,接下 ...
angular路由模拟微信页面切换和页面之间的传值
angular模拟微信页面的切换,页面之间传值.用路由. <!DOCTYPE html> <html><head><meta charset="UT ...
chrome firefox 获取模拟微信浏览器
1. chrome 如何伪造微信浏览器HTTP_USER_AGENT 使用谷歌浏览器非常方便伪造微信浏览器HTTP_USER_AGENT,打开你需要伪造HTTP_USER_AGENT的网页,按F12 ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
模拟微信接口时，提示“请在微信客户端打开链接”
背景描述相信有模拟微信页面请求的测试都有看到过这个页面,简单点说就是爬虫爬微信页面,进行回放的时候会出现这个页面.大概在1年前,专门安排了一个人去解决这个技术问题,遗憾的是当时没有找到解决方案,接下 ...

CSS模拟微信对话框

CSS模拟微信对话框相关推荐

最新文章

热门文章