CSS / JS for circular image cropping

Question

my designer gave me a look that I would like to reproduce, but I'm not very sure how to do it.

• The first part is the circular cropping of the avatar (this is a square load).
• the second part is the speech bubble

I am open to running the first part of the backend, but would rather have a CSS / JS solution.

Answer 1

. http://nicolasgallagher.com/pure-css-speech-bubbles/ , . , , . , , , . ?

, - div , (css), . , .

!

Answer 2

CSS: , .

.profile-img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

- : . , -: before : after CSS, -. , , , , .

http://css-tricks.com/snippets/css/css-triangle/