CSS Tip

A CSS-only Speech Bubble

Create a Speech Bubble using a few lines of code

A speech bubble made with CSS

.bubble {
  --r: 25px; /* the radius */
  --t: 30px; /* the size of the tail */
  
  padding: calc(2*var(--r)/3);
  mask: 
    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
      calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
    radial-gradient(50% 50%,#000 98%,#0000 101%) 
      0 0/var(--r) var(--r) space padding-box;
}
.left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
}
.right {
  --_d: 100%;
  border-right: var(--t) solid #0000;
}

See the Pen CSS only Speech Bubble by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/how-to-create-a-tooltip-speech-bubble-using-css