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:

[![Speech Bubble](https://i.stack.imgur.com/fl8f5.png)](https://i.stack.imgur.com/fl8f5.png)

I have looked at [this site](http://nicolasgallagher.com/pure-css-speech-bubbles/demo/) 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:

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

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

```html
<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...