类似于微信会话聊天列表

时间：2017-05-23 13:18:52 收藏：0 阅读：320

<!DOCTYPE html>
<html>

<head>
<title>微信会话小三角</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,user-scalable=no">
<style type="text/css">
body {
font-family: "Helvetica Neue";
height: 100%;
-webkit-background-size: cover;
background-size: cover;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}

::-webkit-scrollbar-track {
background-color: transparent;
}

.bubble.right:before,
.bubble.right:after {
left: 100%;
}

.bubble.left:before,
.bubble.left:after {
left: 100%;
}

.bubble:before,
.bubble:after {
position: absolute;
top: 14px;
border: 6px solid transparent;
content: " ";
}

.bubble.bubble_primary.right:after {
border-left-color: #00ca7e;
border-left-width: 4px;
}

.bubble.bubble_primary.right {
background-color: #00ca7e;
margin-bottom: 20px;
}

.bubble.bubble_primary.left {
background-color: #b2e221;
}

.bubble.bubble_primary.left:before {
border-right-color: #b2e281;
border-right-width: 4px;
left: -10px;
}

.bubble_cont {
word-wrap: break-word;
word-break: break-all;
min-height: 25px;
}

.bubble {
vertical-align: top;
position: relative;
text-align: left;
font-size: 14px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0 10px;
}

.bubble_cont .plain {
padding: 9px 13px;
}

pre {
margin: 0;
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
word-break: initial;
}
</style>
</head>

<body>
<div class="bubble js_message_bubble ng-scope bubble_primary right">
<div class="bubble_cont ng-scope">
<div class="plain">
<pre class="js_message_plain ng-binding">好久不见了，最近好吗？</pre>
</div>
</div>
</div>

<div class="bubble js_message_bubble ng-scope bubble_primary left">
<div class="bubble_cont ng-scope">
<div class="plain">
<pre class="js_message_plain ng-binding">还好，你那边怎么样？</pre>
</div>
</div>
</div>
</body>
</html>