How to create a speech bubble in css?

Question

I would like to create such a speech,

I am trying to create using CSS. But I can’t align the upper arrow like that. My code

.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 can achieve this by using skewX transform and specifying the origin of the transformation 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 is worth noting that CSS transforms are supported in IE 9 and later.

Answer 2

You can use the CSS3 skew () method in the :after psuedo selector as follows:

 .bubble:after { -ms-transform: skew(-40deg, 0deg); -webkit-transform: skew(-40deg, 0deg); transform: skew(-40deg, 0deg); } 

Here's the 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 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);

change

usw skew instead of rotate . see 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>