How to create a speech bubble with css only - html

Question

I want to make a speech bubble and I'm almost achieving my goal. Just a simple thing that is driving me crazy.
Check HERE to see my code and what I need.
I tried this:
HTML:
<div class="date">
03 Fev 14
</div>
CSS:
.date{
display: block;
width: 50px;
font-weight: 400;
background-color: #00a1e0;
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
padding: 10px 15px;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 20px;
}
.date:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 6px 0;
border-color: #00a1e0 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 0px;
}
As you can see, at the moment I have a triangle with two angles of 45degrees, and I want it to have an angle of 90degrees on top aligned to the left.
How can I achieve this without the use of an additional image?

Answer 1

You need to add the last value for border-width. Try this:
.date:after {
border-width: 10px 10px 0 0;
}
.date {
display: block;
width: 50px;
font-weight: 400;
background-color: #00a1e0;
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
padding: 10px 15px;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 20px;
}
.date:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 0 0;
border-color: #00a1e0 transparent;
display: block;
width: 0;
z-index: 1;
top: 100%;
left: 0px;
}
<h3>What I want: (image)</h3>
<img src="http://i.imgur.com/wlyK9EN.png">
<br>
<br>
<h3>What I have:</h3>
<div class="date">
03 Fev 14
</div>