サービスの流れなどをページでデザインするときに、タテのフローチャートをCSSだけで作ってみたいなと思ったので、完成したものをここでシェアさせていただきます。ご自由にコピペしてお使いください。

CSSでフローチャート（タテ）を作成する方法

ボタンで表示を切り替えてご覧ください。

See the Pen
flowchart02 by kenichi (@ken81)
on CodePen.

フローチャートのタイトルがあって、その下に説明文を入れる形式にしました。説明文を入れる代わりに画像を配置しても良いですね。

HTML

<ol>
  <li><h2>お問い合わせ・ご連絡</h2>
    <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  </li>
  <li><h2>ご面談・事前ヒアリング</h2>
    <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p></li>
  <li><h2>ご提案とお見積もり提示</h2>
    <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p></li>
  <li><h2>ご契約</h2>
    <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p></li>
<ol>

CSS

ol{
  list-style: none;
  border-left: 2px dashed;
  padding-left: 0;
}
ol li{
  margin-left: 2em;
  position: relative;
}
ol li h2{
  margin-bottom: 0;
}
ol li p{
  margin-top: .3em;
}
ol li:before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: calc(-2em - 6px);
  top: .7em;
}
ol li:after{
  content: "";
  border-bottom: 1px solid;
  width: 1.5em;
  background: #000;
  position: absolute;
  top: 1em;
  left: -2em; 
}

これは、ol要素で作成したものです。もしかしたら、リスト要素の中に見出しとパラグラフを入れるのはマークアップとして変かもしれないですね。普通にdiv要素で作成したい場合は、下記のようにしてください。

See the Pen
flowchart03 by kenichi (@ken81)
on CodePen.

HTML

<div class="flowchart">
  <h2>お問い合わせ・ご連絡</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  
  <h2>ご面談・事前ヒアリング</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  
  <h2>ご提案とお見積もり提示</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  
  <h2>ご契約</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
</div>

CSS

.flowchart{
  margin-left: .5em;
  border-left: 2px dashed;
}
.flowchart h2{
  position: relative;
  margin-left: 2em;
  margin-bottom: 0;
}
.flowchart p{
  margin-top: .3em;
  margin-left: 3em;
}
.flowchart h2:before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: calc(-2em - 6px);
  top: .5em;
}
.flowchart h2:after{
  content: "";
  border-bottom: 1px solid;
  width: 1.5em;
  background: #000;
  position: absolute;
  top: .7em;
  left: -2em; 
}

黒い丸のところをアイコンで表示させるという方法もあります。

See the Pen
flowchart03 by kenichi (@ken81)
on CodePen.

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div class="flowchart">
  <h2>お問い合わせ・ご連絡</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  
  <h2>ご面談・事前ヒアリング</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  
  <h2>ご提案とお見積もり提示</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
  
  <h2>ご契約</h2>
  <p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p>
</div>

CSS

.flowchart{
  margin-left: .5em;
  border-left: 2px dashed;
}
.flowchart h2{
  position: relative;
  margin-left: 2em;
  margin-bottom: 0;
}
.flowchart p{
  margin-top: .3em;
  margin-left: 3em;
}
.flowchart h2:before{
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
  content: "\f358";
  position: absolute;
  left: -2.5em;
  top: .2em;
  width: 1em;
  height: 1em;
  border-radius: .5em;
  background: #fff;
}
.flowchart h2:after{
  content: "";
  border-bottom: 1px solid;
  width: 1em;
  background: #000;
  position: absolute;
  top: .8em;
  left: -1.5em; 
}

positionプロパティ、疑似要素、paddingやmarginなどの基本的な知識があれば、誰でも作成できるようになります。

ざっくり作成してあるので、貼り付けるページに効いているスタイルシートの仕様によって黒い丸の位置などがズレると思いますので、調製してみてください。