Create Speech Bubble with CSS [duplicate]

Question

I am trying to create a speech bubble without using an image but unlike a typical speech bubble with a rectangle and a triangle, mine is a little more complex. See the following graphic:

I have looked at this site and it seems that this may be possible with some cool CSS tricks but I do not really know where to start. Can anyone point me in the right direction?

Here is what I have so far:

.speech {
  position: relative;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50px;
}

.speech:after {
  content: "";
  display: block;
  position: absolute;
}

<div class="speech"></div>

Creating the initial circle is easy, and triangles arent too hard once you get the hang of them, the problem I have is that I need to curve the triangle in some way to match the graphic...

This is not a duplicate as the end result must be transparent on all sides and can therefore be placed on top of anything else in the DOM and you wont be able to see where the triangle is cut...

Answer 1

I would create a circular pseudo-element, with a transparent background and border on only one side. Then use transform and position: absolute to manually set it in place.

You'll need to tweak the values depending on the desired size of the bubble and tail.

z-index: -1 hides the pseudo-element under its parent.

.bubble {
  position: relative;
  width: 50px;
  height: 40px;
  
  border-radius: 50%;
  
  background-color: grey;
}

.bubble::after {
  position: absolute;
  width: 40px;
  height: 40px;
  
  bottom: -2px;
  left: -16px;
  
  border-radius: 50px;
  border-bottom: 8px solid grey;
  
  transform: rotate(-55deg);
  z-index: -1;
  content: '';
  
}

<div class="bubble"></div>