CSS/JS for Circular cropping of an image

Question

my designer passed me a look that I would love to be able to replicate, but i am not very sure how to do so.

• the first part is the circular cropping of the avatar (it is a square upload)
• the second part is the speech bubble

I am open to doing the first part in the backend, but would prefer having a CSS/JS solution.

Answer 1

For the circular image you can use CSS's border-radius: just make it large enough so the rounded corners touch.

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

Luke's answer is a good one for the speech bubble: I've created bubbles based on it. I've also adapted this triangle technique using the :before and :after CSS pseudo elements to create some interesting effects on my personal website. You can have one larger than the other and positioned so it looks like a border if you need to.

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

Answer 2

For the speech bubble part I suggest this tutorial. http://nicolasgallagher.com/pure-css-speech-bubbles/ I use it often for ideas and learning how to do it myself. I give you a tutorial because I want you to learn how to do it. If you gave me code that needed some help, then I'd give you an answer on how to fix it. Do you have any code for this yet?

Also for the cropping, I think a quick way to do this is make a square wrapper div around your image then give it a border-radius (css) that is half of the length of one of the sides. Set the overflow to hidden and you're set.

Cheers!