← 動的パーツギャラリーへ戻る

パーツ番号 11-01-09 ・ CSSのみ

セクションディバイダー

波・斜め・ギザギザ3種のSVG区切り。波はゆったり動きます。WordPressのセクション境目を柔らかくつなぐ演出に。

csssvg

プレビュー

ソースコード

HTML

<div class="dv-list">
          <div class="dv dv-wave">
            <span class="dv-name">波(動く)</span>
            <div class="dv-svg-clip">
              <svg class="dv-wave-svg" viewBox="0 0 1200 60" preserveAspectRatio="none" aria-hidden="true">
                <path fill="#fff" d="M0,30 C100,55 200,5 300,30 C400,55 500,5 600,30 C700,55 800,5 900,30 C1000,55 1100,5 1200,30 L1200,60 L0,60 Z"/>
              </svg>
            </div>
          </div>
          <div class="dv dv-slant">
            <span class="dv-name">斜め</span>
            <svg viewBox="0 0 1200 60" preserveAspectRatio="none" aria-hidden="true">
              <path fill="#fff" d="M0,60 L1200,8 L1200,60 Z"/>
            </svg>
          </div>
          <div class="dv dv-zig">
            <span class="dv-name">ギザギザ</span>
            <svg viewBox="0 0 1200 60" preserveAspectRatio="none" aria-hidden="true">
              <path fill="#fff" d="M0,60 L0,30 L100,55 L200,30 L300,55 L400,30 L500,55 L600,30 L700,55 L800,30 L900,55 L1000,30 L1100,55 L1200,30 L1200,60 Z"/>
            </svg>
          </div>
        </div>

CSS

.prev.d11-01-09{padding:16px}
        .d11-01-09 .dv-list{width:100%;display:flex;flex-direction:column;gap:10px}
        .d11-01-09 .dv{position:relative;height:68px;border-radius:8px;overflow:hidden}
        .d11-01-09 .dv-wave{background:linear-gradient(120deg,#5b6bff,#8b5bff)}
        .d11-01-09 .dv-slant{background:linear-gradient(120deg,#ff7e5f,#feb47b)}
        .d11-01-09 .dv-zig{background:linear-gradient(120deg,#2bb3a3,#3ecf8e)}
        .d11-01-09 .dv-name{position:absolute;top:9px;left:12px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:1px;z-index:2}
        .d11-01-09 .dv > svg{position:absolute;left:0;bottom:-1px;width:100%;height:26px;display:block}
        .d11-01-09 .dv-svg-clip{position:absolute;left:0;bottom:-1px;width:100%;height:26px;overflow:hidden}
        .d11-01-09 .dv-wave-svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:d099wave 7s linear infinite}
        @keyframes d099wave{
          from{transform:translateX(0)}
          to{transform:translateX(-50%)}
        }

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