I would like to create a speech like this,

![enter image description here](https://i.stack.imgur.com/WC896.png)

I try to create using CSS. But I cannot align the top arrow like this. My Code is,

```css
.bubble
{
  position: relative;
  width: 275px;
  height: 40px;
  padding: 5px;
  background: #C00006;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}

.bubble:after
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 19px 79px;
  border-color: #C00006 transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -19px;
  top: -79px;
  left: 69%;
}
```

```html
<br><br><br><br>
<div class="bubble"></div>
```

**[Online example](http://jsfiddle.net/vinodvt22/re61160t/1/)** *(on JSFiddle)*.