パーツ番号 11-01-09 ・ CSSのみ
セクションディバイダー
波・斜め・ギザギザ3種のSVG区切り。波はゆったり動きます。WordPressのセクション境目を柔らかくつなぐ演出に。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。