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

前提・実現したいこと

cssでどの画面幅でも角度を維持した、直角三角形の区切りを作りたい。ただし、直角三角形の斜線部分の上下位置は、画面幅を変えても動かしたく無い。

画面幅小(1000px)の時に直角三角形の図で言う上辺が親要素(.parent)の上端にピッタリ付くようにしたい。それ以上の画面幅であれば、直角三角形の図で言う上辺が親要素(.parent)の上端をどんどん上にはみ出すようにしたい。(はみ出た部分はoverflow:hidden;で対処予定)

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

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

該当のソースコード

svg
1<?xml version="1.0" encoding="utf-8"?>
2<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3<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"
4	 y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
5<polygon points="0,100 0,0 100,0 "/>
6</svg>

html
1<div class="parent">
2        <div class="skewed_wrap2">
3            <div class="skewed_wrap">
4                <img src="img/triangle.svg" alt="" class="skewed" width="100" height="100">
5            </div>
6        </div>
7</div>

css
1        html,
2        body {
3            height: 100%;
4        }
5
6        .parent{
7            position: relative;
8            padding-top: 1200px;
9            background-color: red;
10        }
11
12        .skewed_wrap2 {
13            position: absolute;
14            top: 0;
15            left: 0;
16            width: 100%;
17            height: 100%;
18        }
19
20
21        .skewed_wrap {
22            position: relative;
23            width: 100%;
24            padding-top: calc(100% * 0.087488663525924);
25            /*0.087488663525924=直角三角形角度5度の時のタンジェント*/
26        }
27
28        .skewed {
29            position: absolute;
30            top: 0;
31            left: 0;
32            width: 100%;
33            height: 100%;
34            opacity: 0.5;
35        }

三角形を作るために試したこと

・linear-gradient
・border
・svg
・skew
・rotate

上下位置を保つために試したこと

・background-position
↑svgを背景画像にしてcenter centerにしたところ位置を維持できたが、親要素の上端にぴったりつかない。

直角三角形を数式で表すために試したこと

https://keisan.casio.jp/exec/system/1259903491
https://keisan.casio.jp/exec/system/1260261251

行動規範の内容に同意します

回答2件

自己解決

直角三角形の高さ分、直角三角形を上にずらして、その分画面幅を縮めた時に出てくる隙間は、疑似要素で埋めました。画面幅1000pxのとき親要素の上にぴったりくっつかせるために40pxという数値を使いました。

html
1<div class="skewed_wrap2">
2    <img src="img/triangle.svg" alt="" class="skewed" width="100" height="100">
3</div>

css
1.skewed_wrap2 {
2    position: absolute;
3    top: 0px;
4    left: 0;
5    width: 100%;
6    height: 100%;
7}
8
9.skewed_wrap2::before {
10    content: "";
11    position: absolute;
12    top: 0;
13    left: 0;
14    width: 100%;
15    height: calc(40px - (100vw * 0.087488663525924 / 2));
16    border: 1px solid red;
17    background-color: green;
18}
19
20.skewed {
21    position: absolute;
22    top: 0;
23    left: 0;
24    width: 100vw;
25    height: calc(100vw * 0.087488663525924);
26    transform: translateY(-50%);
27    fill: #fff;
28    margin-top: 40px;
29}