Javascript 聊天室就像三角形一样

我正在编写一个相对简单的信号聊天程序，到目前为止已经相当成功了。不过，我希望它的风格类似于闲逛或其他流行聊天。我的问题是下面这些红色三角形。我已经看过好几次尝试复制这种方法，但都没有成功。下面是它现在的样子

不幸的是，当我滚动或者添加了超过容器容量的消息时，这不起作用

无论如何，我不是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>');

---

添加

位置：相对此父div
消息私有消息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>');

$（“#divMessage”）.append（“”+消息+”
“+”+来自用户名+”·时间+”）；
您能添加JSFIDLE吗？@Maddy-这是一个完全公平的请求。一分钟…你太棒了！非常感谢！
 $('#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>');