Custom CSS chat bubble - html

Question

I created a chat bubble using CSS. But I did not get the output I want. Here is my code,
body{
background-color: lightgreen;
}
.bubble {
margin: 100px;
display: inline-block;
position: relative;
width: 300px;
height: auto;
background-color: white;
}
.border{
border: 2px solid red;
}
.border-radius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.triangle-right.border.right-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -26px;
top: -2px;
bottom: auto;
border: 25px solid;
border-color: red transparent transparent transparent;
}
.triangle-right.right-top:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -22px;
top: -0.3px;
bottom: auto;
border: 25px solid;
border-color: white transparent transparent transparent;
}
.chat{
padding: 6px;
}
<div class="bubble triangle-right border-radius border right-top">
<div class="chat">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
</div>
</div>
Output I Get:
Output I Want:
How can I get the output in the second picture. I want to get a curve like effect on top right corner (just like in the second image). thanks.

Answer 1

You can try a radial-gradient() to draw the curve :
possible example
body{
background-color: lightgreen;
}
.bubble {
margin: 100px;
display: inline-block;
position: relative;
width: 300px;
height: auto;
background-color: white;
}
.border{
border: 2px solid red;
}
.border-radius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.triangle-right.right-top:before{
content: ' ';
position: absolute;
border-top:2px red solid;
width:6px;
top:-2px;
right:0;
height:10px;
background:white;
}
.triangle-right.right-top:after{
content: ' ';
position: absolute;
width: 30px;
height: 40px;
left: auto;
right: -30px;
top: -2px;
background:radial-gradient(ellipse at bottom right, transparent 28px, red 29px , red 30px , white 31px);
border-top:solid red 2px;
}
.chat{
padding: 6px;
}
<div class="bubble triangle-right border-radius border right-top">
<div class="chat">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
</div>
</div>
tweek size and position to your needs.