CSS / JS用于图像的圆形裁剪 [英] CSS/JS for Circular cropping of an image

问题描述

我的设计师传递给我一个看起来我想要能够复制，但我不知道如何这样做。

my designer passed me a look that I would love to be able to replicate, but i am not very sure how to do so.

• 第一部分是头像的圆形裁剪（正方形上传）


• 第二部分是语音泡沫

我愿意在后端做第一部分，但是希望有一个CSS / JS解。

I am open to doing the first part in the backend, but would prefer having a CSS/JS solution.

>

推荐答案

对于语音泡沫部分，我建议这个教程。 http://nicolasgallagher.com/pure-css-speech-bubbles/ 我经常使用它的想法和学习如何做到自己。我给你一个教程，因为我想让你学习如何做到。如果你给了我需要一些帮助的代码，我会给你一个如何解决它的答案。你还有这样的代码吗？

For the speech bubble part I suggest this tutorial. http://nicolasgallagher.com/pure-css-speech-bubbles/ I use it often for ideas and learning how to do it myself. I give you a tutorial because I want you to learn how to do it. If you gave me code that needed some help, then I'd give you an answer on how to fix it. Do you have any code for this yet?

对于裁剪，我认为一个快速的方法是做一个方形包装div围绕你的图像，然后给它border-radius（css）是一边的长度的一半。将溢出设置为隐藏，即可设置。

Also for the cropping, I think a quick way to do this is make a square wrapper div around your image then give it a border-radius (css) that is half of the length of one of the sides. Set the overflow to hidden and you're set.

干杯！

这篇关于CSS / JS用于图像的圆形裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！