Как это сверстать?

Question

[Levott]

Не понимаю как так обрезать картинки, думаю как то сделать с помощью clip path, но никак не доходит как это все таки сделать, еще и картинки стоят так "неудобно" что-ли. Хелп! Как это лучше и правильнее реализовать?

Comments

[alexalexes]

Не всегда же все параллельно-перпендикулярно?
Хорошее тренировочное задание, чтобы повысить скилл.

Как это лучше и правильнее реализовать?

Рассмотреть каждый элемент как отдельную подзадачу и, превозмогая боль, пробовать реализовать так, как будто нет других элементов. Потом отдельно реализованные элементы собрать воедино, как дом построить.

Answer 1

[leeroyjenkins176]

img {
border-radius: 50%;
border: 8px solid #fff;
}

Потом просто немного сместить фото друг над другом

Answer 2

[mahmudchon]

Используя z-index такое на изи вообще, ничего не обрезая, особенно на фоне того, что "неудобно".

Answer 3

[Александр Макаров]

https://htmlbook.ru/faq/kak-sdelat-kruglye-izobraz... и добавь нужные z-index