聊天框类似环聊的三角形

Question

我正在编写一个相对简单的SignalR Chat，到目前为止它已经非常成功了。但是，我想将其设置为类似于环聊或其他热门聊天。我的问题是下面的这些红色三角形。我看了几个sources试图复制这个，但我没有成功。这是现在的样子（下图）。

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

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

聊天消息再次非常简单，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;此父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>');