Как сверстать прозрачные закругляшки?

Question

[Андрей Никифоров]

Собственно дерево - фон сайта, есть идеи как сверстать слайдер ?



upd, наложил рамку + border-radius для img

Comments

[Lynn «Кофеман»]

https://toster.ru/answer?answer_id=992741#answers_...

[Андрей Никифоров]

Алексей Тен: а как быть с картинкой внутри которая ?

[Андрей Никифоров]

upd, наложил рамку + border-radius для img

Answer 1

[Иван Вишневский]

jsfiddle.net/leaverou/EjE7c/light

Answer 2

[Андрей Никифоров]

Ничего не подходит, придется накладывать bg, либо делать через mask-border (svg), оба варианта не нравится, попроще неужели нет? просто нужно закруглить края во внутрь

Comments

[Ankhena]

Это же слайдер с ограниченным количеством картинок. Самый простой способ: подготовить их заранее, а не изобретать космический велосипед.

[Андрей Никифоров]

Ankhena W: не факт что заказчик не начнет добавлять свои картинки

[Ankhena]

Андрей Никифоров: я вас прекрасно понимаю. Имеет смысл согласовать это вопрос. Но картинки для слайдера обычно готовят специально, подбирая если не размеры, то хотя бы пропорции.
Либо заказчик будет готовить изображения (или заказывать их подготовку) либо предложить упростить уголки.
Еще есть свойство border-origin оно тоже сколько-то поможет.
А дайте картинку для рамки, посмотрим?

[Андрей Никифоров]

Ankhena W: upd, наложил рамку + border-radius для img