Html Div:Css-after-with-clip-path无法正常工作

我想像这样显示聊天泡泡。我使用div使用CSS类和：after和clip path显示气泡

风格：

    .right-bubble {
    margin-top: 12px;
    padding: 5px 8px;
    font-size: 13px;
    position: relative;
    background: #1e87f0;
    border-radius: 5px;
    text-align: right;
    color:white;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    z-index: 1;
    }

    .right-bubble:after {
    width: 10px;
    height: 45px;
    bottom: 0;
    background: #1e87f0;
    right: -4px;
    clip-path: polygon(0 70%, 0% 100%, 100% 100%);
    }

HTML:

欢迎您，adfdf adsfsdf adsfsdffa adsfdfadsf ASDFDFDF请
等待我们的代理很快就会加入您的行列
fasdfdsf

它仅显示圆角框。它没有显示右下箭头。

.右气泡{
边缘顶部：12px；
填充：5px 8px；
字体大小：13px；
位置：相对位置；
背景：#1e87f0；
边界半径：5px；
文本对齐：右对齐；
颜色：白色；
盒影：0 5px 15px rgba（0,0,0,08）；
z指数：1；
宽度：50%；
边框右下半径：0；
}
.右气泡p{
文本对齐：左对齐；
保证金：0；
填充：10px；
}
.右泡泡：之后{
宽度：10px；
高度：45px；
底部：0；
背景：#1e87f0；
右：-4px；
剪辑路径：多边形（0 70%，0%100%，100%100%）；
}
.向右箭头{
宽度：0；
身高：0；
边框顶部：20px实心透明；
边框底部：00px实心透明；
左边框：20px实心#1e87f0；
位置：绝对位置；
右-5%；
底部：0；
}
欢迎，先生这是你的留言

要显示伪元素，您需要添加

内容：“”。正在添加内容：“”；不工作。将显示箭头。但是它非常大。我想展示一个小的。另外，如何以类似的方式显示左箭头？
    <div class="right-bubble">
       <p>Welcome, adfdf adsfsdf adsfsdffa adsfdfadsf asdfsdf Please 
       wait. Our agent will join you shortly.asdfadsf adfd asdff asdf 
       fasdfdsf
       </p>
    </div>