Как сверстать блок с картинкой со срезанными углами, чтобы снизу был фон изображением?

Question

[Zanob]

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

- Блок с картинкой увеличивается по высоте в зависимости от текста слева, чем больше текст, тем больше высота картинки. Текста может быть любое количество.

- Картинка добавляется через img src это стандартный способ добавления во всех движках из админки.

- Фон блока задается через css background в файле css, тоже довольно стандартный прием.

1. Нужно чтобы, были срезаны уголки у блока с картинкой
2. Нужно чтобы наклон углов не менялся когда высота блока с картинкой меняется.

Вот разметка, которая должна быть

https://codepen.io/ikles/pen/rNOQgZx

Дизайн прилагаю

Comments

[Richard Smith]

И вообще Вы делал тоже самое, когда верстал кнопки влево и вправо.

Answer 1

[Арсений Матыцин]

Максим Ленский продемонстировал ответ на вопрос. Маску для картинки: она встраивается в документ и применяется по необходимости.

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

Answer 2

[Максим]

На svg



SVG mask

Comments

[Zanob]

- Изображение должно загружаться через тэг , а фон можно фоном сделать через css.
- Картинка в контенте и фон под ней это разные изображения, а не одно и то же.
- Высота блока с картинкой может меняться при этом уголки должны оставаться на своем месте, а изображение не должно искажаться.

[Максим]

Zanob, я указал там ширину - width - уберите и превратите в svguri - тогда можно загружать как background - если что то не устраивает - то открываете фотошоп и делаете

[Zanob]

Максим Ленский, странный ответ. Ваше решение не подходит для этой задачи, это и не устраивает. Какой фотошоп? Это блок в котором контент менеджер должен поменять картинку из админки. Просто берет и загружает любую картинку. Фон блока под картинкой другой, а не продолжение картинки, как это сделано у вас. Все это видно из дизайна.

[Максим]

Zanob, ну и что что поменять ? там у меня что стоит не картинка ? обычный тег image и всё - вы лучше скажите что не умеете работать с svg я пойму

[Zanob]

Максим Ленский, не умею и что? Я описал задачу, ваше решение тут не подходит. Если бы я умел, то зачем бы задавал вопросы.

[Максим]

Zanob, тогда ответа нету на этот вопрос - вам ни кто не угодит - в моём примере чуть чуть допилить - и будет то что надо

[Кирилл Никитин]

Zanob, с задачей вам на фриланс, а не сюда.

[Zanob]

Максим Ленский, Видимо я неправильно объяснил и меня не так поняли. Вот разметка, которая должна быть



- Блок с картинкой увеличивается по высоте в зависимости от текста слева, чем больше текст, тем больше высота картинки. Текста может быть любое количество.

- Картинка добавляется через img src это стандартный способ добавления во всех движках из админки.

- Фон блока задается через css background в файле css, тоже довольно стандартный прием.

1. Нужно чтобы, были срезаны уголки у блока с картинкой
2. Нужно чтобы наклон углов не менялся когда высота блока с картинкой меняется.

[Zanob]

Кирилл Никитин, Можете взяться за эту задачу, напишите в личку цену вопроса.

Все детали задачи:

Видимо я неправильно объяснил и меня не так поняли. Вот разметка, которая должна быть



- Блок с картинкой увеличивается по высоте в зависимости от текста слева, чем больше текст, тем больше высота картинки. Текста может быть любое количество.

- Картинка добавляется через img src это стандартный способ добавления во всех движках из админки.

- Фон блока задается через css background в файле css, тоже довольно стандартный прием.

1. Нужно чтобы, были срезаны уголки у блока с картинкой
2. Нужно чтобы наклон углов не менялся когда высота блока с картинкой меняется.

[Максим]

Zanob, https://codepen.io/topicstarter/pen/BaoGXKL - так ?

Answer 3

[Richard Smith]

Как вариант, можно так сделать https://codepen.io/klimsava/pen/pojQBRa

Comments

[Максим]

а с картинкой ?

[Zanob]

Внутри блока должна быть картинка, а не фон. В вашем случае, если вставить внутрь блока картинку, то получается квадратный блок. Но для обычного блока без картинки ваше решение отличное!

[Zanob]

Видимо я неправильно объяснил и меня не так поняли. Вот разметка, которая должна быть



- Блок с картинкой увеличивается по высоте в зависимости от текста слева, чем больше текст, тем больше высота картинки. Текста может быть любое количество.

- Картинка добавляется через img src это стандартный способ добавления во всех движках из админки.

- Фон блока задается через css background в файле css, тоже довольно стандартный прием.

1. Нужно чтобы, были срезаны уголки у блока с картинкой
2. Нужно чтобы наклон углов не менялся когда высота блока с картинкой меняется.

Answer 4

[Олег]

Вариант без маски и svg на чистом css

Comments

[Zanob]

Видимо я неправильно объяснил и меня не так поняли. Вот разметка, которая должна быть



- Блок с картинкой увеличивается по высоте в зависимости от текста слева, чем больше текст, тем больше высота картинки. Текста может быть любое количество.

- Картинка добавляется через img src это стандартный способ добавления во всех движках из админки.

- Фон блока задается через css background в файле css, тоже довольно стандартный прием.

1. Нужно чтобы, были срезаны уголки у блока с картинкой
2. Нужно чтобы наклон углов не менялся когда высота блока с картинкой меняется.

[Арсений Матыцин]

Zanob, вкладывать описание задачи в комментарии под ответами это гениально. Подними в вопрос.