<div class="bubble left">Bro ipsum dolor sit amet gaper backside single track, manny Bike epic clipless. Schraeder drop gondy, rail fatty slash gear jammer steeps</div>
<div class="bubble right">Ok, Thank you</div>
<div class="bubble left"> ut labore et dolore magna </div>
<div class="bubble right">👌</div>

.bubble {
  --r: 1em;  /* the radius */
  --t: 1.5em; /* the size of the tail */
  
  max-width: 300px;
  padding: 1em;
  border-inline: var(--t) solid #0000;
  border-radius: calc(var(--r) + var(--t))/var(--r);
  mask: 
    radial-gradient(100% 100% at var(--_p) 0,#0000 99%,#000 102%) 
      var(--_p) 100%/var(--t) var(--t) no-repeat,
    linear-gradient(#000 0 0) padding-box;
  background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
  color: #fff;
}
.left {
  --_p: 0;
  border-bottom-left-radius: 0 0;
  place-self: start;
}
.right {
  --_p: 100%;
  border-bottom-right-radius: 0 0;
  place-self: end;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 20px;
  font-family: system-ui, sans-serif;
  font-size: 20px;
}