Javascript CSS/JS用于图像的循环裁剪

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

• 第一部分是阿凡达的圆形裁剪（这是一个方形上传）
• 第二部分是演讲泡沫

我愿意在后端完成第一部分，但更愿意使用CSS/JS解决方案

---

对于语音气泡部分，我建议使用本教程。我经常用它来表达自己的想法和学习如何去做。我给你一个教程，因为我想让你学习如何做。如果你给了我需要帮助的代码，那么我会给你一个关于如何修复它的答案。你有这方面的代码吗

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

---

干杯

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

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

卢克的答案对于演讲泡沫来说是一个很好的答案：我根据它创造了泡沫。我还使用：before和：after CSS伪元素修改了这个三角形技术，在我的个人网站上创建了一些有趣的效果。如果需要，可以将一个比另一个大，并将其定位为看起来像边框

---

非常感谢！我有一些我废弃的代码，觉得必须有一种更优雅的方式来做。你的图坦卡蒙链接看起来真的很好。裁剪：多么聪明的主意！我现在就试试。谢谢没问题，请记住，在safari和chrome中，您可能还必须使用-webkit border radius才能使其在这些浏览器中工作。谢谢@tomas mulder-我最终也使用了您的解决方案。=）