<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>css聊天框</title>
<style>
* {
margin: 0;
padding: 0;
}
.chat {
position: relative;
max-width: 260px;
padding: 10px 6px;
border: 2px solid #ccc;
margin-top: 50px;
margin-left: 50px;
border-radius: 5px;
word-break: break-all;
}
.triangle,
.triangle_two {
position: absolute;
top: 15px;
border-width: 10px;
border-style: solid;
}
.triangle {
left: -20px;
border-color: transparent #ccc transparent transparent;
}
.triangle_two {
right: -20px;
border-color: transparent transparent transparent #ccc;
}
.fill,
.fill_two {
position: absolute;
top: 15px;
border-width: 10px;
border-style: solid;
}
.fill {
left: -16px;
border-color: transparent #fff transparent transparent;
}
.fill_two {
right: -16px;
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="chat">
<div class="triangle"></div>
<div class="fill"></div>
同乡您好,很高兴能够遇到你!可以跟我聊聊吗?
</div>
<div class="chat">
<div class="triangle_two"></div>
<div class="fill_two"></div>
同乡您好,很高兴能够遇到你!可以跟我聊聊吗?
</div>
</body>
</html>