@BookerDeWitt

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

Здравствуйте, необходимо реализовать эффект загнутой бумаги(пробовал делать двумя треугольниками но у меня не получаеться сделать прозрачным изображение с оладьями внутри одного из треугольников), а также изменение размеров блоков внутри родительского блока зажав ЛКМ, как на фото:
e48fee735332t.jpg
Если изображение слишком маленькое: radikal.ru/big/ctar036u513d6

Вот подготовил jsfiddle https://jsfiddle.net/vvdrr62t/2/
  • Вопрос задан
  • 1117 просмотров
Решения вопроса 1
Ni55aN
@Ni55aN
Есть два известных мне варианта:
Первый:
1. верхний без нижней полоски высотой h
2. нижний высотой h, но без левой части, в которой уголок загнут
(нужно учесть правильную обрезку фона и позицию
3. сам уголок

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

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

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

П.С. Ох уж эти дизайнеры, из-за которых верстальщики страдают
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
alienSimka
@alienSimka
Too hard, you will not understand
Если по клику вызвать такой border то вот ТАК без jquery
Ответ написан
Комментировать
dom1n1k
@dom1n1k
Я бы пообщался с дизайнером или заказчиком и попробовал договориться об устранении этих хреней.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы