纯CSS实现气泡聊天框的方法

最新推荐文章于 2020-01-28 19:52:15 发布

weixin_30505043

最新推荐文章于 2020-01-28 19:52:15 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/janney/p/6656795.html

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>纯CSS实现气泡聊天框的方法</title> 
<style type="text/css"> 

.message-box  
{ 
  position:relative; 
  width:200px; 
  height:40px; 
  line-height:40px; 
  border:1px solid #000; 
  text-align:center; 
  color:#fff; 
  border-radius:2px;
  background-color:green;
} 
.triangle-border  
{ 
  position:absolute; 
  overflow:hidden;  
  width:0; 
  height:0; 
  border-width:8px 0 8px 8px ; 
  border-style:dashed dashed dashed solid;
  top:13px; 
} 
.tb-border  
{ 
  right:-8px;
  border-color:transparent transparent transparent #000; 
} 
.tb-background  
{ 
  right:-7px;
  border-color:transparent transparent transparent green; 
}
</style> 
</head> 
<body> 
<div class="message-box">
  <span>气泡聊天框实现</span> 
  <div class="triangle-border tb-border"></div> 
  <div class="triangle-border tb-background"></div> 
</div>  
</body> 
</html>

运行结果：

转载于:https://www.cnblogs.com/janney/p/6656795.html

weixin_30505043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现气泡聊天框的方法

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><ti...
复制链接

扫一扫