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

アニメ矢印フロー図

カード間を流れる点線の矢印でプロセスをつなぎます。WordPressのワークフロー説明やサービス連携図の可視化に役立ちます。

autocss

プレビュー

ソースコード

HTML

<div class="d05-03-05-flow">
          <div class="d05-03-05-box">お問い合わせ</div>
          <div class="d05-03-05-arrow"><span></span></div>
          <div class="d05-03-05-box">ヒアリング</div>
          <div class="d05-03-05-arrow"><span></span></div>
          <div class="d05-03-05-box">制作・納品</div>
        </div>

CSS

.d05-03-05-flow{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px}
        .d05-03-05-box{background:#fff;border:1px solid #dbe3f0;border-radius:8px;padding:12px 14px;font-size:12px;font-weight:700;color:#1e293b;box-shadow:0 3px 9px rgba(30,50,90,.07)}
        .d05-03-05-arrow{position:relative;width:38px;height:20px;display:flex;align-items:center;overflow:hidden}
        .d05-03-05-arrow::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);border-left:7px solid #4f7cff;border-top:5px solid transparent;border-bottom:5px solid transparent}
        .d05-03-05-arrow span{position:absolute;left:0;top:50%;transform:translateY(-50%);width:30px;height:2px;background-image:linear-gradient(90deg,#4f7cff 55%,transparent 55%);background-size:8px 2px;background-repeat:repeat-x;animation:d125move 1s linear infinite}
        @keyframes d125move{to{background-position:8px 0}}

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