css3 - How to create a speech bubble in css? -

css3 - How to create a speech bubble in css? -

i create speech this,

i seek create using css. cannot align top arrow this. code is,

class="snippet-code-css lang-css prettyprint-override">.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%; } class="snippet-code-html lang-html prettyprint-override"><br><br><br><br> <div class="bubble"></div>

online example (on jsfiddle).

you accomplish using skewx transform , specifying origin of transform follows:

class="snippet-code-css lang-css prettyprint-override">.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%; /* improve specifying top */ right: 38px; /* equal width of arrow, 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%; } class="snippet-code-html lang-html prettyprint-override"><div class="bubble"></div>

it's worth noting css transforms are supported in ie 9 , newer.

css css3 css-shapes