<div class="leftmsg"/>
<div class="rightmsg"/>
<style>
.leftmsg{
padding:5px 5px 5px 5px;
margin-top: 5px;
margin-left: 60px;
// float:left;
background-color: #4c7ef3;
width:60%;
border-radius: 5px;
margin-bottom: 5px;
position: relative;
}
.leftmsg:before{
content:'';
position: absolute;
left:-10px;
top:24px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #ccc;
}
.rightmsg{
padding:5px 5px 5px 5px;
margin-top:5px;
text-align: left;
width:60%;
background-color: #95b3f3;
float:right;
margin-right: 20px;
border-radius: 5px;
margin-bottom: 5px;
position: relative;
}
.rightmsg:before{
content:'';
position: absolute;
right:-10px;
top:24px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #ccc;
}
</style>
div设置边角小三角形
最新推荐文章于 2024-05-09 17:00:10 发布