Css实现聊天框
在这里插入图片描述
<!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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读