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

左右対称の砂時計型ファネル

絞り込みと再拡散を上下対称の砂時計形状で表した図です。獲得から定着、紹介による再拡大までの循環構造を1枚で見せたいピッチ資料の図解に使えます。

staticcss

プレビュー

ソースコード

HTML

<svg class="d05-15-06-svg" viewBox="0 0 260 220">
          <defs>
            <linearGradient id="d1854g" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#6366f1"></stop>
              <stop offset="50%" stop-color="#4338ca"></stop>
              <stop offset="100%" stop-color="#059669"></stop>
            </linearGradient>
          </defs>
          <polygon points="20,15 240,15 140,110 240,205 20,205 140,110" fill="url(#d1854g)"></polygon>
          <text x="130" y="34" text-anchor="middle" font-size="11" fill="#fff" font-weight="700">獲得 5,200</text>
          <text x="130" y="115" text-anchor="middle" font-size="10" fill="#fff" font-weight="700">定着 1,150</text>
          <text x="130" y="192" text-anchor="middle" font-size="11" fill="#fff" font-weight="700">紹介 3,800</text>
        </svg>

CSS

.d05-15-06{padding:14px}
        .d05-15-06-svg{width:200px;height:180px}

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