利用css实现聊天气泡
方法一
利用border属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现气泡</title>
<style>
.message-box {
position:relative;
width:240px;
height:60px;
line-height:60px;
background:#E9FBE4;
box-shadow:1px 2px 3px #E9FBE4;
border:1px solid #C9E9C0;
border-radius:4px;
text-align:center;
}
.triangle-border {
position:absolute;
left:30px;
overflow:hidden;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
}
.tb-border1 {
top:60px;
border-color:#C9E9C0 transparent transparent transparent;
}
.tb-background1 {
top:59px;
border-color:#E9FBE4 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="message-box">
<span>利用 border 属性实现的</span>
<div class="triangle-border tb-border1"></div>
<div class="triangle-border tb-background1"></div>
</div>
</body>
</html>
方法二
利用◆字符来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现气泡</title>
<style>
.message-box {
position:relative;
width:240px;
height:60px;
line-height:60px;
background:#E9FBE4;
box-shadow:1px 2px 3px #E9FBE4;
border:1px solid #C9E9C0;
border-radius:4px;
text-align:center;
}
.triangle-character {
position:absolute;
left:30px;
overflow:hidden;
width:20px;
height:20px;
font:normal 20px "宋体"; // 字符的大小和字体也有关系哦!
}
.tc-border2 {
top:50px;
color:#C9E9C0;
}
.tc-background2 {
top:49px;
color:#E9FBE4;
}
</style>
</head>
<body>
<div class="message-box">
<span>利用 ◆ 字符实现的</span>
<div class="triangle-character tc-border2">◆</div>
<div class="triangle-character tc-background2">◆</div>
</div>
</body>
</html>
方法三
利用css3的transform实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现气泡</title>
<style>
.message-box {
position:relative;
width:240px;
height:60px;
line-height:60px;
background:#E9FBE4;
box-shadow:1px 2px 3px #E9FBE4;
border:1px solid #C9E9C0;
border-radius:4px;
text-align:center;
}
.triangle-css3 {
position:absolute;
top:55px;
left:30px;
overflow:hidden;
width:10px;
height:10px;
background:#E9FBE4;
border-bottom:1px solid #C9E9C0;
border-right:1px solid #C9E9C0;
}
.transform {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class="message-box">
<span>利用 css transfrom </span>
<div class="triangle-css3 transform"></div>
</div>
</body>
</html>