实现QQ聊天气泡效果

最新推荐文章于 2022-02-04 16:46:42 发布

a18609637075

最新推荐文章于 2022-02-04 16:46:42 发布

阅读量1.5k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/a18609637075/article/details/38897521

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<style>
.sender{
clear:both;
}
.sender div:nth-of-type(1){
float: left;
}
.sender div:nth-of-type(2){
background-color: aquamarine;
float: left;
margin: 0 20px 10px 15px;
padding: 10px 10px 10px 0px;
border-radius:7px;
}

.receiver div:first-child img,
.sender div:first-child img{
width:50px;
height: 50px;
}

.receiver{
clear:both;
}
.receiver div:nth-child(1){
float: right;
}
.receiver div:nth-of-type(2){
float:right;
background-color: gold;
margin: 0 10px 10px 20px;
padding: 10px 0px 10px 10px;
border-radius:7px;
}

.left_triangle{
height:0px;
width:0px;
border-width:8px;
border-style:solid;
border-color:transparent aquamarine transparent transparent;
position: relative;
left:-16px;
top:3px;
}

.right_triangle{
height:0px;
width:0px;
border-width:8px;
border-style:solid;
border-color:transparent transparent transparent gold;
position: relative;
right:-16px;
top:3px;
}

</style>
</head>
<body>

<div class="sender">
<div>
<img src="chatTemplateExample2_files/cat.jpg">
</div>
<div>
<div class="left_triangle"></div>
<span> hello, man! </span>
</div>
</div>

<div class="receiver">
<div>
<img src="chatTemplateExample2_files/cat.jpg">
</div>
<div>
<div class="right_triangle"></div>
<span> hello world </span>
</div>
</div>
</body>
</html>