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

横型矢印ファネル(訪問→カート→購入)

3つの矢印形状を重ねて配置した横型のステップファネルです。ECサイトの購買導線を横並びで説明するバナーやスライド資料の挿絵に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-02-wrap">
          <div class="d05-15-02-arrow d05-15-02-a1"><span class="d05-15-02-t">訪問</span><span class="d05-15-02-n">8,200</span></div>
          <div class="d05-15-02-arrow d05-15-02-a2"><span class="d05-15-02-t">カート</span><span class="d05-15-02-n">2,650</span></div>
          <div class="d05-15-02-arrow d05-15-02-a3"><span class="d05-15-02-t">購入</span><span class="d05-15-02-n">940</span></div>
        </div>

CSS

.d05-15-02{padding:20px}
        .d05-15-02-wrap{display:flex;align-items:center;justify-content:center}
        .d05-15-02-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1.4;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%,16% 50%)}
        .d05-15-02-t{font-size:10.5px;font-weight:700}
        .d05-15-02-n{font-size:9.5px;font-weight:600;opacity:.9}
        .d05-15-02-a1{width:132px;height:74px;background:#f97316;margin-right:-20px;z-index:3}
        .d05-15-02-a2{width:110px;height:58px;background:#fb923c;margin-right:-20px;z-index:2}
        .d05-15-02-a3{width:88px;height:42px;background:#fdba74;color:#7c2d12;z-index:1}

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