css3 对话样式

最新推荐文章于 2023-10-24 17:41:19 发布

weixin_34090562

最新推荐文章于 2023-10-24 17:41:19 发布

阅读量277

点赞数

原文链接：http://www.cnblogs.com/a-long/p/6014843.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy">

.img-left{
padding-top: 8px;
padding-left: 106px;
min-height: 100px;
border: none
}
.img-left>img:first-child {
position: absolute;
top: 10px;
left: 10px;
max-width: 80px;
max-height: 80px;
width: 100%;
height: 100%;
}

.dialogue-left{
margin-top:3px;padding: 5px;background: #eee;border-radius: 3px;min-height: 80px
}
.dialogue-left span:before{
content: ' ';
display: inline-block;
position: absolute;
right: 93px;
top: 20px;
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e5e5e5 #e5e5e5;
}

.dialogue-right{
margin-top:3px;padding: 5px;background: #eee;border-radius: 3px;min-height: 80px
}
.dialogue-right span:before{
content: ' ';
display: inline-block;
position: absolute;
left: 93px;
top: 20px;
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: rgba(0, 0, 0, 0) #e5e5e5 #e5e5e5 rgba(0, 0, 0, 0);
}
</style>
<body>
<div class="tip img-right">
<img src="1.jpg"/>
<p class="dialogue-left">
<span>
每天帅一点，这tm还怎么活
</span>
</p>
</div>

<div class="tip img-left">
<img src="2.jpg"/>
<p class="dialogue-right">
<span>
每天都在帅，却依然那么丑
</span>
</p>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/a-long/p/6014843.html

weixin_34090562

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 对话样式

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="Content-Security-Policy"> <meta name="viewport" content="initial-scale=1, maximum-...
复制链接

扫一扫