Как сделать рамки с помощью css или с помощью svg для изображений и вписать изображения туда?

Question

[vladdof]

Есть такие рамки в макете. Нужно в них вписать рандомно изображения для слайдера.
Но кроме как заранее подготавливать изображения под такой стиль как будто нет идей.

Comments

[Froggyweb]

https://habr.com/ru/companies/skillfactory/article...

[vladdof]

Froggyweb, спасибо за статью) и генератор я находил, который делает clip-path, но все они делают с острыми углами, а тут есть вырезки по середине и закругленные углы.

[Froggyweb]

vladdof,

.masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(star.svg);
  mask-image: url(star.svg);
}

[vladdof]

Froggyweb, попробовал, что-то изображение невидно в таком случае (

[Froggyweb]

vladdof, https://habr.com/ru/companies/ruvds/articles/729974/

Answer 1

[resusplus]

Если правильно понял вопрос, то самый простой вариант - нарисовать рамки с прозрачным фоном под картинки. Далее положить под них картинки для слайдера задав нижний слой через index-z. Это позволит менять картинки слайдера не нарушая контур рамок.
Сами рамки можно нарисовать в svg тут svgedit.netlify.app