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

【问题标题】：CSS/JS for Circular cropping of an image用于圆形裁剪图像的 CSS/JS
【发布时间】：2012-04-06 03:07:51
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript ruby-on-rails css imagemagick

【解决方案1】：

对于圆形图像，您可以使用 CSS 的边框半径：只需将其设置得足够大，以便圆角接触即可。

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

Luke 的回答对于气泡来说是一个很好的答案：我已经根据它创建了气泡。我还使用 :before 和 :after CSS 伪元素调整了这种三角形技术，以在我的个人网站上创建一些有趣的效果。如果你需要，你可以让一个比另一个大，并定位成看起来像一个边框。

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

【讨论】：

感谢@tomas-mulder - 我最终也使用了您的解决方案。 =)

【解决方案2】：

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

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

干杯！

【讨论】：

感谢一百万！我有一些我垃圾的代码，觉得必须有一种更优雅的方式来做到这一点。您与 tut 的链接看起来非常好。裁剪：多么聪明的主意！现在就试试。谢谢！
没问题，请记住，在 safari 和 chrome 中，您可能还必须使用 -webkit-border-radius 才能使其在这些浏览器中工作。