Div: clip-path后的Css不能正常工作

Question

我想像这样展示聊天气泡。我使用div来显示气泡，使用CSS类和:after来显示气泡。

​

​

风格：

    .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：

    <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>

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

Answer 1

​

<style>
.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;
    width:50%;
    border-bottom-right-radius: 0;
}

.right-bubble p{
    text-align: left;
    margin: 0;
    padding: 10px;
}

.right-bubble:after {
    width: 10px;
    height: 45px;
    bottom: 0;
    background: #1e87f0;
    right: -4px;
    clip-path: polygon(0 70%, 0% 100%, 100% 100%);
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 00px solid transparent;
    border-left: 20px solid #1e87f0;
    position:absolute;
    right:-5%;
    bottom:0;
}
</style>

<!-- HTML -->
<div class="right-bubble">
    <p>Welcome, Sir this is your message</p>
    <div class="arrow-right"></div>
</div>

​