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

Question

我的设计师给了我一个我希望能够复制的外观，但我不太确定如何做到这一点。

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

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

Answer 1

对于圆形图像，您可以使用 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/

Answer 2

对于气泡部分，我建议使用本教程。http://nicolasgallagher.com/pure-css-speech-bubbles/我经常用它来表达想法和学习如何自己做。我给你一个教程，因为我想让你学习如何去做。如果你给了我需要帮助的代码，那么我会给你一个关于如何修复它的答案。你有任何代码吗？

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

干杯!