Custom CSS chat bubble

2
votes

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:

enter image description here

Output I Want: enter image description here

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.

1
htmlcsschatmsgbox

1 Answers

3
votes

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.