Реализация эффекта загнутой бумаги и масштабирование блоков зажав ЛКМ?

Question

[BookerDeWitt]

Здравствуйте, необходимо реализовать эффект загнутой бумаги(пробовал делать двумя треугольниками но у меня не получаеться сделать прозрачным изображение с оладьями внутри одного из треугольников), а также изменение размеров блоков внутри родительского блока зажав ЛКМ, как на фото:

Если изображение слишком маленькое: radikal.ru/big/ctar036u513d6

Вот подготовил jsfiddle https://jsfiddle.net/vvdrr62t/2/

Comments

[Kovalsky]

Простые варианты

Answer 1

[Vitaliy]

Есть два известных мне варианта:
Первый:
1. верхний без нижней полоски высотой h
2. нижний высотой h, но без левой части, в которой уголок загнут
(нужно учесть правильную обрезку фона и позицию
3. сам уголок

Второй:
обрезать с помощью clip-path: polygon (но поддержка не ахти https://caniuse.com/#search=clip-path) и добавить псевдоэлементом квадрат в угол (квадрат тоже обрежется)

Второй вариант: https://jsfiddle.net/vvdrr62t/3/

Что касается второй части вопроса, то его лучше вынести отдельным вопросом

П.С. Ох уж эти дизайнеры, из-за которых верстальщики страдают

Comments

[BookerDeWitt]

Спасибо. Я не то чтобы страдающий верстальщик), просто решил бесплатный PSD макет реализовать в целях изучения front end разработки

Answer 2

[simka alien]

Если по клику вызвать такой border то вот ТАК без jquery

Answer 3

[dom1n1k]

Я бы пообщался с дизайнером или заказчиком и попробовал договориться об устранении этих хреней.

Уголок тут не играет никакой ни смысловой, ни эстетической роли, которые оправдывали бы его присутствие. Это просто потуга дизайнера в духе "чтобы тут ещё всунуть, чтоб они не подумали, что я мало поработал? ну хз, вот пусть ещё уголок будет!"

Движок для изменения по факту тоже никому не нужен, он только глаза мозолит посреди карточки. Никто не будет там это двигать, если фото и текст изначально между собой нормально сбалансированы. Как максимум, я бы сделал 2 дискретных положения - фото узкое/широкое. А кнопочку для этого сделал бы маленькую снизу.