javascript - 聊天框环聊式三 Angular 形

Question

我正在编写一个相对简单的 SignalR Chat，到目前为止它非常成功。但是，我希望它的样式类似于环聊或其他流行的聊天。我的问题是下面的这些红色三 Angular 形。我看过几个 sources试图复制这个，但我一直没有成功。这是它现在的样子(下图)。

不幸的是，当我滚动或我添加的消息多于容器中的内容时，这不起作用。

无论如何我都不是 CSS 专家，但我认为这与绝对定位有关。下面是我的一些代码和CSS。如果您想了解更多信息，请告诉我。如果我能得到任何帮助/想法，我将不胜感激，谢谢。

又是聊天消息， super 简单，html由js生成:

$('#' + ctrId).find('#divMessage').append('<div style="padding:5px;">' +
    '<div class="message private-message pm-other">' + 
        '<p>' + message + '</p>' + 
        '<time>' + fromUserName + '<strong> · </strong>' + time + '</time>' + 
    '</div>' +
'</div>');

这是与之配套的 CSS:

.private-message {
    background: white;
    padding: 10px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.private-message p {
    font-size: 0.90em;
    margin: 0 0 0.05em 0;
}
.private-message time {
    font-size: 0.80em;
    color: #ccc;
}
.private-message:before{
    content: "";
    position: absolute;
    right: 95%;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 13px solid red;
    border-bottom: 13px solid transparent;
}

Answer 1

添加position: relative;这个parent div message private-message pm-other

替换这个

 $('#divMessage').append('<div style="padding:5px; position: relative;"><div class="message private-message pm-other"><span class=""></span><p>' + message + '</p>' + '<time>' + fromUserName + '<strong> · </strong>' + time + '</time></div></div>');