Div：使用clip-path后的Css无法正常工作

Question

我想像这样显示聊天气泡。我使用div来使用CSS类显示气泡，然后使用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：

    <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

.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%;
    }

    .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: 40px solid transparent;
  border-bottom: 00px solid transparent;
  border-left: 40px solid #1e87f0;
  position:absolute;
  right:-12%;
  bottom: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 class="arrow-right"></div>
    </div>