Как сделать «отзывчивый» конверт на css?

Question

[Gustov]

С квадратом вопросов нет, треугольник я формирую с помощью border, но как сделать этот треугольник отзывчивым, что бы он изменялся пропорционально квадрату?

https://jsfiddle.net/a4p5w8sy/5/

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

Answer 1

[Юрий Кучеренко]

Сделай с помощью SVG

Comments

[Gustov]

С помощью SVG можно сделать подобный отзывчивый треугольник не трогая квадрат? Я просто не умею пока что рисовать в svg и я так понимаю что лучше всего просто вырезать изображение карты с треугольником?

[Юрий Кучеренко]

Gustov: изи

Answer 2

[Владимир]

Используй vw и vh
https://jsfiddle.net/a4p5w8sy/7/

Comments

[Gustov]

Здорово, хороший способ! Только vw и vh отталкивается от ширины окна, а данный конверт у меня еще лежит в блоке где max-width: 1440px; margin: 0 auto;
Поэтому такой способ мне не подходит.

Answer 3

[trushka]

Можно задавать для квадрата и треугольника размеры в em, тогда размеры конвертика будут меняться изменением font-size.
А если он должен адаптивно в зависимости от размера страницы меняться - то в vw задать можно
А лучше нарисовать треугольничек на svg полигоном и вставить как background-image, растянув на всю ширину