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.
我愿意在后端做第一部分，但更喜欢使用CSS / JS解决方案。
2 个解决方案
#1
7
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?
对于语音泡沫部分，我建议本教程。 http://nicolasgallagher.com/pure-css-speech-bubbles/我经常使用它来创意并学习如何自己动手。我给你一个教程，因为我希望你学习如何做到这一点。如果你给了我需要一些帮助的代码，那么我会给你一个如何解决它的答案。你有这个代码吗？
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.
同样对于裁剪，我认为快速做到这一点的方法是在图像周围做一个方形包装div，然后给它一个边长半径（css），它是其中一个边长度的一半。将溢出设置为隐藏，然后设置。
Cheers!
干杯!
#2
12
For the circular image you can use CSS's border-radius: just make it large enough so the rounded corners touch.
对于圆形图像，您可以使用CSS的border-radius：只需使其足够大以使圆角接触。
.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.
卢克对于讲话泡泡的回答是好的：我已经基于它创建了泡泡。我还使用了：before和：之后的CSS伪元素在我的个人网站上创建了一些有趣的效果。您可以拥有一个比另一个更大的位置，以便在需要时看起来像边框。
http://css-tricks.com/snippets/css/css-triangle/
http://css-tricks.com/snippets/css/css-triangle/
#1
7
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?
对于语音泡沫部分，我建议本教程。 http://nicolasgallagher.com/pure-css-speech-bubbles/我经常使用它来创意并学习如何自己动手。我给你一个教程，因为我希望你学习如何做到这一点。如果你给了我需要一些帮助的代码，那么我会给你一个如何解决它的答案。你有这个代码吗？
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.
同样对于裁剪，我认为快速做到这一点的方法是在图像周围做一个方形包装div，然后给它一个边长半径（css），它是其中一个边长度的一半。将溢出设置为隐藏，然后设置。
Cheers!
干杯!
#2
12
For the circular image you can use CSS's border-radius: just make it large enough so the rounded corners touch.
对于圆形图像，您可以使用CSS的border-radius：只需使其足够大以使圆角接触。
.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.
卢克对于讲话泡泡的回答是好的：我已经基于它创建了泡泡。我还使用了：before和：之后的CSS伪元素在我的个人网站上创建了一些有趣的效果。您可以拥有一个比另一个更大的位置，以便在需要时看起来像边框。
http://css-tricks.com/snippets/css/css-triangle/
http://css-tricks.com/snippets/css/css-triangle/