Как сделать эффект закруглений как на фото?

Question

[Андрей]

Здравствуйте.
Знает кто как можно сделать закругления как на фото?

Подозреваю что просто на CSS это не сделаешь, поэтому возможно етьс уже готовый скрипт?
Получилось вот так только:

Comments

[Ankhena]

Знает кто как можно сделать закругления как на фото?

Раньше реже, а сейчас это еженедельный вопрос.

https://jsfiddle.net/Ankhena/xjpefyq0/
https://codepen.io/AnnaSummer/pen/gOQVxBR
https://jsfiddle.net/Ankhena/wkdfngyu/
https://jsfiddle.net/Ankhena/1hu9ot0q/1/

и т.д.

[Андрей]

Ankhena, Спасибо. Это сейчас популярный стиль.

[Максим]

Ankhena, то есть получается такие скругления делать в ручную?автоматизировать не получиться?

[Ankhena]

Максим, автоматизировать? Я все стили пишу руками. Вы имеете в виду придумать миксин? Это получится.

[Максим]

Ankhena, я имел ввиду, расположили сетку с картинок то типу масонри, их много и везде вот такие/подобные скругления и не получится автоматизировать такие радиусы? Или для каждого изображения делать в ручную ?

[Ankhena]

Максим, если есть закономерность, то получится. Тут она есть,по крайней мере по предоставленному скрину.
И обычный грид, без masonry.

Answer 1

[historydev]

svg, clip-path

Comments

[Андрей]

Ну я думал об этом. Но т.к. страница адаптивная, будет значительно меняться в зависимости от размеров экрана, так что это будет супер гемор через svg.

[historydev]

Андрей, Маску можешь попробовать ещё:
https://jsfiddle.net/ov3uby7d/
https://www.w3schools.com/css/tryit.asp?filename=t...

Answer 2

[Kamomiruku]

img {
  border-radius: 15px;
}

Это также работает с картинкой, у которой нет бордера

Comments

[Deita]

Та CSS косячный, проще общую картинку разрезать если нет никакой анимации

Answer 3

[dvrr]

border-radius