[前端]实现仿微信聊天对话框边框样式-GOFLY在线客服-GO语言实现开源独立部署客服系统
2023-02-18 15:36:30 时间
GOFLY在线客服的对话框样式是类似微信那样的有个小尖角的样式
可以:before :after
以及border-right-color等边框样式实现
demo如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对话框</title> </head> <style> .chatDialogBox { background-color: rgb(255,255,255); color: #000; border: 1px solid rgb(237,237,237); min-height: 20px; padding: 8px 15px; word-break: break-all; position: relative; border-radius: 5px; display: inline-block; font-size: 14px; } .chatDialogBox:before,.chatDialogBox:after { content: ""; display: block; position: absolute; width:0; height: 0; border: 6px solid transparent; border-right-color: rgba(255,255,255,1); left: -11px; top: 10px; z-index:1; } .chatDialogBox:after { left: -12px; border-right-color: rgb(237,237,237); z-index:0; } </style> <body> <div class="chatDialogBox">你好</div> </body> </html>
相关文章
- Linux NTP工具的基本使用
- Linux 系统环境监测
- Linux I/O模型
- Linux Lvs的防火墙标记
- linux LVS的DR模式多网段
- linux LVS的DR模式实现
- Linux LVS-NAT模式的实现
- linux IPtables的匹配条件
- linux IPtables 规则的管理
- Linux IPtables相关概念
- Linux 使用ipvsadm管理LVS
- Linux LVS的调度算法
- Linux LVS的四种工作模式
- Linux 集群和分布式相关概念
- Linux 会话管理
- Linux sersync + rsync 实现实时数据同步
- Linux 利用inotify和rsync服务实现数据实时同步
- Linux SAMBA 服务-cifs文件系统的挂载
- Linux NFS服务
- Linux FTP传输协议