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

グラデーションファネル(絞り込みを色で表現)

単一のグラデーション図形で描いた滑らかな漏斗形状です。色の濃淡だけで絞り込みのイメージを伝えるため、マーケティング資料の抽象的なアイキャッチに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-04-wrap">
          <svg class="d05-15-04-svg" viewBox="0 0 260 200">
            <defs>
              <linearGradient id="d1852g" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#a78bfa"></stop>
                <stop offset="100%" stop-color="#4c1d95"></stop>
              </linearGradient>
            </defs>
            <polygon points="15,12 245,12 180,190 80,190" fill="url(#d1852g)"></polygon>
            <line x1="35" y1="60" x2="225" y2="60" stroke="#fff" stroke-width="1.5" opacity="0.55"></line>
            <line x1="55" y1="110" x2="205" y2="110" stroke="#fff" stroke-width="1.5" opacity="0.55"></line>
            <line x1="75" y1="155" x2="185" y2="155" stroke="#fff" stroke-width="1.5" opacity="0.55"></line>
          </svg>
          <div class="d05-15-04-legend"><span>認知</span><span>興味</span><span>検討</span><span>購入</span></div>
        </div>

CSS

.d05-15-04{padding:16px}
        .d05-15-04-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
        .d05-15-04-svg{width:200px;height:154px}
        .d05-15-04-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:10px;color:#94a3b8;font-weight:600}

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