cssで三角形の区切りを作りたい

前提・実現したいこと

cssでどの画面幅でも角度を維持した、直角三角形の区切りを作りたい。ただし、直角三角形の斜線部分の上下位置は、画面幅を変えても動かしたく無い。
イメージ説明
画面幅小(1000px)の時に直角三角形の図で言う上辺が親要素(.parent)の上端にピッタリ付くようにしたい。それ以上の画面幅であれば、直角三角形の図で言う上辺が親要素(.parent)の上端をどんどん上にはみ出すようにしたい。(はみ出た部分はoverflow:hidden;で対処予定)

発生している問題・エラーメッセージ

直角三角形の斜線部分の上下位置が画面幅を動かすとずれていってしまう。

該当のソースコード

svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg preserveAspectRatio="none" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<polygon points="0,100 0,0 100,0 "/>
</svg>

html
<div class="parent">
        <div class="skewed_wrap2">
            <div class="skewed_wrap">
                <img src="img/triangle.svg" alt="" class="skewed" width="100" height="100">
            </div>
        </div>
</div>

css
        html,
        body {
            height: 100%;
        }

        .parent{
            position: relative;
            padding-top: 1200px;
            background-color: red;
        }

        .skewed_wrap2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


        .skewed_wrap {
            position: relative;
            width: 100%;
            padding-top: calc(100% * 0.087488663525924);
            /*0.087488663525924=直角三角形角度5度の時のタンジェント*/
        }

        .skewed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }