添付画像のデザインをCSSで再現したい

前提・実現したいこと

CSS記述方法をお教え頂きたいです。

画像のように進行を表す装飾を実装したいのですが、方法が思い浮かびません。
疑似要素で矢印を書いたのですが、背景色を変更することを考えていなく、色々検討したのですがいい案が浮かびません。

HTML
1      <div class="form__flow">
2        <p class="flow__contents">情報入力</p>
3        <p class="flow__contents">登録完了</p>
4        <p class="flow__contents">マイページで編集</p>
5      </div>

SCSS
1  .form__flow{
2    position: relative;
3    margin-top: 70px;
4    display: flex;
5    justify-content: center;
6    &::before{
7      content: "";
8      position: absolute;
9      top: 0;
10      right: 72px;
11      width: 50px;
12      height: 25px;
13      background-color: #fff;
14      transform: rotate(65deg);
15      z-index: 10;
16    }
17    &::after{
18      content: "";
19      position: absolute;
20      bottom: 0;
21      right: 72px;
22      width: 50px;
23      height: 25px;
24      background-color: #fff;
25      transform: rotate(-65deg);
26    }
27    .flow__contents{
28      position: relative;
29      padding-top: 18px;
30      padding-bottom: 18px;
31      width: 260px;
32      font-size: 18px;
33      font-weight: bold;
34      line-heght: 1.7;
35      color: #fff;
36      text-align: center;
37      background-color: #bebebe;
38      &::before{
39        content: "";
40        position: absolute;
41        top: 16px;
42        left: -25px;
43        width: 37px;
44        height: 2px;
45        background-color: #fff;
46        transform: rotate(65deg);
47      }
48      &::after{
49        content: "";
50        position: absolute;
51        bottom: 16px;
52        left: -25px;
53        width: 37px;
54        height: 2px;
55        background-color: #fff;
56        transform: rotate(-65deg);
57      }
58      &:first-of-type{
59        &::before{
60          content: "";
61          position: absolute;
62          top: 26px;
63          left: -28px;
64          width: 0;
65          height: 0;
66          border-style: solid;
67          border-width: 0 35px 15px 35px;
68          border-color: transparent transparent #ffffff transparent;
69          transform: rotate(90deg);
70          background-color: transparent;
71        }
72        &::after{
73          content: none;
74        }
75      }
76      &:nth-child(3){
77        padding-right: 15px;
78      }
79    }
80  }
81

CSS
1.form__flow {
2  position: relative;
3  margin-top: 70px;
4  display: flex;
5  justify-content: center;
6}
7.form__flow::before {
8  content: "";
9  position: absolute;
10  top: 0;
11  right: 72px;
12  width: 50px;
13  height: 25px;
14  background-color: #fff;
15  transform: rotate(65deg);
16  z-index: 10;
17}
18.form__flow::after {
19  content: "";
20  position: absolute;
21  bottom: 0;
22  right: 72px;
23  width: 50px;
24  height: 25px;
25  background-color: #fff;
26  transform: rotate(-65deg);
27}
28.form__flow .flow__contents {
29  position: relative;
30  padding-top: 18px;
31  padding-bottom: 18px;
32  width: 260px;
33  font-size: 18px;
34  font-weight: bold;
35  line-heght: 1.7;
36  color: #fff;
37  text-align: center;
38  background-color: #bebebe;
39}
40.form__flow .flow__contents::before {
41  content: "";
42  position: absolute;
43  top: 16px;
44  left: -25px;
45  width: 37px;
46  height: 2px;
47  background-color: #fff;
48  transform: rotate(65deg);
49}
50.form__flow .flow__contents::after {
51  content: "";
52  position: absolute;
53  bottom: 16px;
54  left: -25px;
55  width: 37px;
56  height: 2px;
57  background-color: #fff;
58  transform: rotate(-65deg);
59}
60.form__flow .flow__contents:first-of-type::before {
61  content: "";
62  position: absolute;
63  top: 26px;
64  left: -28px;
65  width: 0;
66  height: 0;
67  border-style: solid;
68  border-width: 0 35px 15px 35px;
69  border-color: transparent transparent #ffffff transparent;
70  transform: rotate(90deg);
71  background-color: transparent;
72}
73.form__flow .flow__contents:first-of-type::after {
74  content: none;
75}
76.form__flow .flow__contents:nth-child(3) {
77  padding-right: 15px;
78}
79