How to create a speech bubble in css? - css

Question

I would like to create a speech like this,
I try to create using CSS. But I cannot align the top arrow like this. My Code is,
.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%;
}
<br><br><br><br>
<div class="bubble"></div>
Online example (on JSFiddle).

Answer 1

You could achieve that by using skewX transform and specifying the origin of the transform as follows:
.bubble {
position: relative;
top: 4.8em;
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;
/* top: -79px; */
bottom: 100%; /* better than specifying the top */
right: 38px; /* equal to width of the arrow, for instance */
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
transform: skewX(-45deg);
-webkit-transform-origin: 38px 100%;
-moz-transform-origin: 38px 100%;
-ms-transform-origin: 38px 100%;
-o-transform-origin: 38px 100%;
transform-origin: 38px 100%;
}
<div class="bubble"></div>
It's worth noting that CSS transforms are supported in IE 9 and newer.

Answer 2

You can use the CSS3 skew() method on your :after psuedo selector like this:
.bubble:after {
-ms-transform: skew(-40deg, 0deg);
-webkit-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
}
Here's a jsFiddle Demo.
.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 27px 79px;
border-color: #C00006 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -19px;
top: -79px;
left: 69%;
-ms-transform: skew(-40deg, 0deg);
-webkit-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
}
<br/>
<br/>
<br/>
<br/>
<div class="bubble"></div>

Answer 3

try this http://jsfiddle.net/harshdand/gczu8w4e/
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 19px 120px;
border-color: #C00006 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -49px;
top: -79px;
left: 95%;
-ms-transform: (50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
transform: rotate(50deg);
edit
usw skew instead of rotate . see the snippet with minimal CSS
transform: skew(-45deg);
.bubble {
position: relative;
bottom: -70px;
width: 275px;
height: 40px;
padding: 5px;
background: #C00006;
border-radius: 14px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 19px 79px;
border-color: #C00006 transparent;
width: 1px;
z-index: 1;
bottom: 95%;
left: 79%;
transform: skew(-45deg);
}
<div class="bubble"></div>