Как реализовать сей блок?

Question

[Strimaxart]

Доброго времени суток, наткнулся на одну проблему, а именно - как сделать подобный блок frame со свойством overflow: hidden, что бы поверх него можно было наложить с помощью position: absolute основное изображение и оно подрезалось блоком frame?
Мог бы просто сделать блок с уже вырезанным в фотошопе изображении и просто налепить его на блок, но я хочу потом посадить на cms и что бы другому человеку не пришлось возиться в фотошопе и просто загрузить любое - другое изображение и она сразу обрезалась по форме подложки.
Надеюсь понятно объяснил(

вот пример изображения

Answer 1

[Rustam Bainazarov]

В данном случае держать SVG в разметке, как в примере Андрей, необязательно.

Все что нужно — внешний файл SVG с атрибутом preserveAspectRatio="none" + background-size: 100% 100%. Тогда можно вызывать нужную картинку с волной через background: url() — и все будет адаптивно растягиваться.

В примере я сделал не через ссылку, а через base64, потому что не знаю хостингов, куда можно загрузить SVG, вам же нужно просто поменять base64-код на ссылку с вашего хостинга:


Вот сам код SVG, обратите внимание на атрибут preserveAspectRatio="none":

<svg preserveAspectRatio="none" viewBox="0 0 314 109">
  <path d="M45.33 34.92A183.358 183.358 0 0 0 92.91 41c70.66.27 107.53-30.89 180.89-30.95a263.848 263.848 0 0 1 40.2 3.09V109H0V15.82a181.388 181.388 0 0 0 45.33 19.1z" fill="#fff"></path>
</svg>

Comments

[Strimaxart]

Данный вариант не подходит, так как при этом надо будет играться с тенями этого блока и тд вот как к примеру надо сделать

[Strimaxart]

Strimaxart, Strimaxart, я понимаю что можно использовать тень внутри, но лучше наверное было бы использовать блок как подложку нужной формы

[Rustam Bainazarov]

Strimaxart, наверное, надо было с этого начать как бы, нет? Вы этого в теле вопроса не указали, а указали совсем иное. Ну с тенями тогда у вас никаких вариантов нет, кроме как изголяться. Маску делать, что-то там ещё пытаться совместить с ней. Или же картинку изначально обрезать, делая PNG + filter: drop-shadow().

Или же вставлять картинку как составную часть SVG и делать тень с помощью SVG.

Вот ещё изучайте:
https://codepen.io/thebabydino/pen/BRROzw

[Рома Зварич]

Рустам Байназаров, подскажите пожалуйста, Вы этот SVG вручную рисовали или или в какой-то программе?

[Rustam Bainazarov]

Рома Зварич, вручную в программе.

[Рома Зварич]

Рустам Байназаров, под "вручную" я имел в виду написание кода, а под "программой" - рисование, например, в Adobe Illustrator. Не могли бы подсказать название программы, которую использовали?

[Rustam Bainazarov]

Рома Зварич, я не очень представляю людей, которые это будут делать вручную только с помощью кода. Конкретно это — Inkscape, потом упростил в BoxySVG.

[Рома Зварич]

Рустам Байназаров, ясно. Спасибо за ответ

Answer 2

[Андрей]

svg

Comments

[Strimaxart]

Как это примерно реализовывается

[Андрей]

примерно вот так. ответ есть тут Как реализовать данный блок на css?