Div: Css after with clip-path is not working correctly

Question

I want to display chat bubble like this. I use div to display the bubble using CSS class and :after with clip-path.

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

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

It displays the rounded corner box only. It is not displaying the bottom right arrow.

For a pseudo-element to appear you need to add `content:"";`. — Rainbow, May 12 '18 at 17:43

Empty Brain · Answer 1 · 2020-02-17T06:35:37.853

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

The arrow is displayed. But it is very big. I want to show a small one. Also, how do I show left arrow in the similar way? — arun kumar, May 14 '18 at 02:37

Div: Css after with clip-path is not working correctly

1 Answers1