Как сделать двухцветный диагональный фон гибким, не искажая угол? Попутный ветер и Javascript ⇐ Javascript

[Anonymous]

Я пытаюсь создать угловой раздел, который будет содержать изображение приложения, над которым я работаю, и некоторый текст о нем. В итоге я получил правильные размеры для многоугольника, и он изгибается, но, поскольку я использую проценты, угол любит деформироваться при сгибании (см. изображения ниже)
Нет сгибания:
введите здесь описание изображения
При гибкости:
введите описание изображения. здесь
Я не уверен, как лучше всего поступить в этом конкретном случае, сохранив при этом размер страницы того же размера, что и дисплей, не влияя на угол. Код ниже показывает, как я получал многоугольник.

Код: Выделить всё

    function Login() {
return (







className="flex-1 bg-[#f7f7f7] pr-[5em]"
style={{
clipPath: `polygon(0 0, 100% 0, 100% 100%, 25% 100%)`,
}}
>

This is a Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi adipisci officia enim quas laudantium illo! Ea, temporibus? Provident voluptatem in perspiciatis, a nemo fuga? Magni atque dicta assumenda alias deserunt?






);
}

Я пытался использовать прямоугольник или другие значения для контура обрезки и даже пытался повернуть все это, но, к сожалению, возникла какая-то странная проблема со скрытием углов (не из-за переполнение скрыто). Любая помощь приветствуется!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -the-angle