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

Question

我的设计师给了我一个外观，我很想能够复制它，但我不太确定该怎么做。

• 第一部分是头像的圆形裁剪(是方形上传)
• 第二部分是对话泡泡

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

Answer 1

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

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

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

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