CSS / JS用于图像的圆形裁剪

Question

我的设计师给了我一个我希望能够复制的外观，但我不知道该怎么做。

• 第一部分是头像的圆形裁剪（它是方形上传）
• 第二部分是讲话泡泡

我愿意在后端做第一部分，但更喜欢使用CSS / JS解决方案。

Answer 1

对于圆形图像，您可以使用CSS的border-radius：只需使其足够大以使圆角接触。

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

Luke的答案对于讲话泡泡是一个很好的答案：我已经基于它创建了泡泡。我还使用：before和：之后的CSS伪元素在我的个人网站上创建了一些有趣的效果。你可以有一个比另一个更大并定位，以便在需要时看起来像边框。

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

Answer 2

对于讲话泡泡部分，我建议本教程。 http://nicolasgallagher.com/pure-css-speech-bubbles/我经常将它用于创意并学习如何自己动手。我给你一个教程，因为我希望你学习如何做到这一点。如果你给了我需要一些帮助的代码，那么我会给你一个如何解决它的答案。你有这方面的代码吗？

同样对于裁剪，我认为快速做到这一点的方法是在图像周围做一个方形包装div，然后给它一个边长半径（css），它是其中一个边长度的一半。将溢出设置为隐藏，然后设置。

干杯！