Create a complex CSS shape (talking bubble)

Question

What would be your best option or method for creating the form, as shown in the full attachment of the attachment link, and is this possible anyway?

I did research and testing using CSS parallelogram, for example. but not with good success.

See here the form →> http://tinypic.com/r/352ge3b/6

Answer 1

I had this thing, that this could be done with only one element - and this can be done, I just do not consider this the best solution for this.

Demo

HTML

<div class='speech-bubble'>Hello!</div> 

CSS

 .speech-bubble { position: relative; margin: .5em auto; padding: 1em; width: 10em; height: 4em; border-radius: .25em; transform: rotate(-4deg) rotateY(15deg); background: #629bdd; font: 2em/4 Century Gothic, Verdana, sans-serif; text-align: center; } .speech-bubble:before, .speech-bubble:after { position: absolute; z-index: -1; content: ''; } .speech-bubble:after { top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; transform: rotate(2deg) translate(.35em, -.15em) scale(1.02); background: #f4fbfe; } .speech-bubble:before { border: solid 0 transparent; border-right: solid 3.5em #f4fbfe; border-bottom: solid .25em #629bdd; bottom: .25em; left: 1.25em; width: 0; height: 1em; transform: rotate(45deg) skewX(75deg); } 

Answer 2

Not quite what you are looking for, but I was playing with a CSS3 perspective and spinning around and doing this:

 body { color: #FFF; font-family: sans-serif; } .outer { position: relative; height: 120px; width: 120px; margin: 50px; padding:10px; perspective:150; -webkit-perspective:150; } .inner { border-radius: 15px; padding:50px; position: absolute; background-color: #80BFFF; transform: rotateY(10deg); -webkit-transform: rotateY(10deg); box-shadow: -4px -4px 0px #3399FF; } .inner:after { content: ' '; position: absolute; width: 0; height: 0; left: 20px; top: 115px; border: 15px solid; border-color: #80BFFF transparent transparent #80BFFF; } 

What is my HTML stuff

 <div class="outer"> <div class="inner">Yay!</div> </div>