パーツ番号 05-15-01 ・ CSSのみ

縦型ファネル(台形積み重ね・5段階)

訪問から購入まで5段階の台形を積み重ねた縦型ファネルの静止見本です。WordPressのLP実績紹介セクションで、コンバージョン経路を図解するイメージ図として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-01-wrap">
          <div class="d05-15-01-seg d05-15-01-s1"><span>訪問 12,400</span></div>
          <div class="d05-15-01-seg d05-15-01-s2"><span>登録 6,850</span></div>
          <div class="d05-15-01-seg d05-15-01-s3"><span>カート 3,120</span></div>
          <div class="d05-15-01-seg d05-15-01-s4"><span>決済 1,480</span></div>
          <div class="d05-15-01-seg d05-15-01-s5"><span>購入 620</span></div>
        </div>

CSS

.d05-15-01{padding:22px 20px;align-items:stretch}
        .d05-15-01-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
        .d05-15-01-seg{display:flex;align-items:center;justify-content:center;height:34px;color:#fff;font-size:10.5px;font-weight:700;clip-path:polygon(6% 0,94% 0,100% 100%,0% 100%)}
        .d05-15-01-s1{width:100%;background:#60a5fa}
        .d05-15-01-s2{width:80%;background:#3b82f6}
        .d05-15-01-s3{width:60%;background:#2563eb}
        .d05-15-01-s4{width:40%;background:#1d4ed8}
        .d05-15-01-s5{width:22%;background:#1e3a8a;font-size:9.5px}

クラス名 .d05-15-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。