パーツ番号 02-10-34 ・ CSSのみ

縦帯2色分割背景見出し

見出しの背景を縦に2色へ分割するスタイル。ビフォーアフター紹介や2択の比較コンテンツの見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="split">
            <h4 class="ttl">BEFORE/AFTER 比較</h4>
          </div>
        </div>

CSS

.d02-10-34 .wrap{ text-align:center; }
        .d02-10-34 .split{ position:relative; display:inline-block; padding:16px 30px; }
        .d02-10-34 .split::before{ content:""; position:absolute; inset:0; left:0; width:50%; background:#1f2937; z-index:0; }
        .d02-10-34 .split::after{ content:""; position:absolute; inset:0; left:50%; width:50%; background:#0ea5e9; z-index:0; }
        .d02-10-34 .ttl{ all:unset; position:relative; z-index:1; display:block; font-size:19px; font-weight:800; color:#fff; }

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