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

ジグザグ工程

上下ジグザグに配置した工程をSVGの曲線パスでつなぎます。WordPressの制作ステップやロードマップを楽しく見せられます。

csssvg

プレビュー

ソースコード

HTML

<div class="d05-03-07-wrap">
          <svg class="d05-03-07-path" viewBox="0 0 300 120" preserveAspectRatio="none">
            <path d="M40 30 C90 30 90 90 150 90 S210 30 260 30" fill="none" stroke="#c7d4ec" stroke-width="2" stroke-dasharray="5 5"/>
          </svg>
          <span class="d05-03-07-node d05-03-07-n1"><i>1</i>お問い合わせ</span>
          <span class="d05-03-07-node d05-03-07-n2"><i>2</i>制作</span>
          <span class="d05-03-07-node d05-03-07-n3"><i>3</i>納品</span>
        </div>

CSS

.d05-03-07-wrap{position:relative;width:100%;max-width:300px;height:120px}
        .d05-03-07-path{position:absolute;inset:0;width:100%;height:100%}
        .d05-03-07-node{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:10px;color:#64748b;white-space:nowrap;transform:translate(-50%,-50%)}
        .d05-03-07-node i{width:26px;height:26px;border-radius:50%;background:#4f7cff;color:#fff;font-style:normal;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;box-shadow:0 3px 8px rgba(79,124,255,.35)}
        .d05-03-07-n1{left:13%;top:25%}
        .d05-03-07-n2{left:50%;top:75%}
        .d05-03-07-n3{left:87%;top:25%}

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