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

ピラミッド型の逆ファネル(獲得構造)

下にいくほど幅が広がる逆さのファネルで、顧客層の裾野構造を表した図です。ブランドの顧客獲得ピラミッドを説明する会社紹介ページの図解に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-10-wrap">
          <div class="d05-15-10-seg d05-15-10-s1"><span>コア顧客 5%</span></div>
          <div class="d05-15-10-seg d05-15-10-s2"><span>中核層 18%</span></div>
          <div class="d05-15-10-seg d05-15-10-s3"><span>一般層 35%</span></div>
          <div class="d05-15-10-seg d05-15-10-s4"><span>潜在層 42%</span></div>
        </div>

CSS

.d05-15-10{padding:22px 20px;align-items:stretch}
        .d05-15-10-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
        .d05-15-10-seg{display:flex;align-items:center;justify-content:center;height:34px;color:#fff;font-size:10px;font-weight:700;clip-path:polygon(6% 0,94% 0,100% 100%,0% 100%)}
        .d05-15-10-s1{width:26%;background:#166534}
        .d05-15-10-s2{width:48%;background:#15803d}
        .d05-15-10-s3{width:70%;background:#22c55e}
        .d05-15-10-s4{width:96%;background:#86efac;color:#14532d}

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