擬似要素で作った三角形の底辺をページの伸縮と共に広げたい

■と擬似要素で作った▲をくっつけたものをレスポンシブ対応時にwidth１００％にしたいのですが（通常時は■の大きさをwidth２００pxで表記していました）■の方は読み取ってくれるのですが▲の方は読み取ってくれないです

ページの伸縮と共に伸び縮みするようにしたいため％で大きさを表記しないといけないと思うのですがこういった擬似要素の三角形のborderを％で表す方法はありますか、またコードを見てここをこうすれば良いなどがありましたら教えていただきたいです

該当のソースコード

html
1<div class="flow-left">
2          <ol class="flow-list">
3            <li>
4              <span class="flow-text">1.ヒアリング</span>
5            </li>
6            <li>
7              <span class="flow-text">2.プラン提案</span>
8            </li>
9            <li>
10              <span class="flow-text">3.契約</span>
11            </li>
12            <li>
13              <span class="flow-text">4.着工</span>
14            </li>
15            <li>
16              <span class="flow-text">5.完成</span>
17            </li>
18          </ol>
19        </div>

css
1#flow .flow-text {
2  display: inline-block;
3  font-size: 14px;
4  font-weight: 400;
5  margin-top: 30px;
6}
7#flow .flow-left li {
8  margin-left: 20px;
9  margin-bottom: 60px;
10  width: 200px;
11  height: 80px;
12  color: white;
13  background-color: #414141;
14  position: relative;
15  z-index: 2;
16}
17#flow .flow-left li::after {
18  content: "";
19  position: absolute;
20  display: block;
21  bottom: -30px;
22  left: 0px;
23  height: 0;
24  border-top: 30px solid #414141;
25  border-right: 100px solid transparent;
26  border-left: 100px solid transparent;
27}
28#flow .flow-list {
29  position: relative;
30}
31#flow .flow-list::after {
32  content: "";
33  position: absolute;
34  background-color: #fedd03;
35  width: 50px;
36  height: 600px;
37  left: 95px;
38  top: 0;
39}
40ーーーーーーーーーーーーーレスポンシブーーーーーーーーーーーーーー
41#flow .flow-list {
42    padding: 0 40px;
43  }

試したこと

三角形の辺の割合にしてみたこと

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

回答1件

ベストアンサー

疑似要素のborderで三角形を作っていますが、borderの幅は%（相対値）では設定できないので、
vwという画面幅を基準とする絶対値で全体のレイアウトを決めて、borderの幅もvw単位で設定するといいでしょう。

設定例

css
1#flow .flow-text {
2  display: inline-block;
3  font-size: 14px;
4  font-weight: 400;
5  margin-top: 30px;
6}
7#flow .flow-left li {
8  margin-left: 0;
9  margin-bottom: 60px;
10  width: 80vw;
11  height: 80px;
12  color: white;
13  background-color: #414141;
14  position: relative;
15  z-index: 2;
16}
17#flow .flow-left li::after {
18  content: "";
19  position: absolute;
20  display: block;
21  bottom: -30px;
22  left: 0;
23  height: 0;
24  border-top: 30px solid #414141;
25  border-right: 40vw solid transparent;
26  border-left: 40vw solid transparent;
27}
28#flow .flow-list {
29  position: relative;
30}
31#flow .flow-list::after {
32  content: "";
33  position: absolute;
34  background-color: #fedd03;
35  width: 20vw;
36  height: 600px;
37  left: 10vw;
38  top: 0;
39}
40
41#flow .flow-list {
42  padding: 0;
43  width: 80vw;
44  margin: 0 auto;
45}

幅がpxの固定なのをvw単位に変更しましたが、縦の黄色のバーも適当にvwで設定しましたので、
お好みで調整してください。

CodePenサンプル

別案

疑似要素は使わずに、clip-path で切り抜くという方法もあります。
これだと%で設定できますので、vwを使う必要はないし、疑似要素を使う必要もないので、シンプルになります。

css
1#flow .flow-left li {
2  margin-left: 0;
3  margin-bottom: 30px;
4  width: 80vw;
5  height: 110px;
6  color: white;
7  background-color: #414141;
8  position: relative;
9  z-index: 2;
10  clip-path: polygon(0 0, 100% 0%, 100% 73%, 50% 100%, 0 73%);
11}