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

離脱率(%)付きファネル

各段階の間に離脱率を挟んで表示する台形ファネルです。改善提案資料や分析レポートページで、ボトルネック工程を視覚的に示す図解として活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-03-wrap">
          <div class="d05-15-03-seg d05-15-03-s1">サイト訪問 15,000</div>
          <div class="d05-15-03-drop">▼ 離脱 42%</div>
          <div class="d05-15-03-seg d05-15-03-s2">商品詳細閲覧 8,700</div>
          <div class="d05-15-03-drop">▼ 離脱 55%</div>
          <div class="d05-15-03-seg d05-15-03-s3">カート追加 3,900</div>
          <div class="d05-15-03-drop">▼ 離脱 38%</div>
          <div class="d05-15-03-seg d05-15-03-s4">購入完了 2,420</div>
        </div>

CSS

.d05-15-03{padding:18px 20px;align-items:stretch}
        .d05-15-03-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
        .d05-15-03-seg{display:flex;align-items:center;justify-content:center;height:28px;color:#fff;font-size:10px;font-weight:700;clip-path:polygon(6% 0,94% 0,100% 100%,0% 100%)}
        .d05-15-03-s1{width:100%;background:#2dd4bf}
        .d05-15-03-s2{width:74%;background:#14b8a6}
        .d05-15-03-s3{width:50%;background:#0d9488}
        .d05-15-03-s4{width:32%;background:#0f766e}
        .d05-15-03-drop{font-size:9.5px;font-weight:700;color:#ef4444}

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