Как сделать маску в css?

Question

[istasiik]

Здравствуйте! Есть вот такой вот css стиль для картинки .blocks-dialog .block .ava img {width:50px; }
Не могу разобраться, как поверх него сделать круглую маску средствами CSS? Это для аватарки в диалоге.

Answer 1

[Maksim Zverev]

.ava{
border-radius: 100px;
overflow:hidden;
}

И лучше не делать такую вложенность.
blocks-dialog .block .ava img{}
В будущем это доставит проблемы.

Comments

[istasiik]

Спасибо! А если входная картинка прямоугольник?

[Maksim Zverev]

Хоть треугольник. Картинка будет вписана в окружность которая вписана в квадрат 50x50. Все что выходит за пределы круга будет спрятано.

[istasiik]

@m1skam , Странно, в чем может быть причина такого вот? imgur.com/CeIuLlU

[Maksim Zverev]

@istasiik для контейнера .ava пропишите высоту и ширину в 50px

[istasiik]

@m1skam отлично, спасибо большое!

Answer 2

[Александр Таратин]

jsfiddle.net/QW01_01/Ny6LK