パーツ番号 05-12-07 ・ CSSのみ

エリアチャート(塗りつぶし折れ線・SVG)

折れ線の下側をグラデーションで塗りつぶしたエリアチャートの静止表現です。トレンド感を演出する装飾グラフィックとしてトップページの見出し脇などに使えます。

staticcss

プレビュー

ソースコード

HTML

<svg class="d05-12-07-svg" viewBox="0 0 300 140" preserveAspectRatio="none">
          <defs>
            <linearGradient id="d1277g" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#34d399" stop-opacity="0.55"></stop>
              <stop offset="100%" stop-color="#34d399" stop-opacity="0.05"></stop>
            </linearGradient>
          </defs>
          <line x1="0" y1="35" x2="300" y2="35" stroke="#eef1f5" stroke-width="1"></line>
          <line x1="0" y1="70" x2="300" y2="70" stroke="#eef1f5" stroke-width="1"></line>
          <line x1="0" y1="105" x2="300" y2="105" stroke="#eef1f5" stroke-width="1"></line>
          <polygon points="0,140 0,95 60,70 120,85 180,40 240,55 300,20 300,140" fill="url(#d1277g)"></polygon>
          <polyline points="0,95 60,70 120,85 180,40 240,55 300,20" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline>
        </svg>

CSS

.d05-12-07{padding:20px}
        .d05-12-07-svg{width:100%;height:170px;display:block}

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