パーツ番号 02-13-03 ・ CSSのみ

斜め見出しバナー

中央に一定角度で傾けた帯状の見出しを配置した見本です。WordPressのセール告知セクションやトップページの目立たせたいお知らせに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-03-wrap">
          <div class="d02-13-03-banner">SPECIAL OFFER キャンペーン開催中</div>
        </div>

CSS

.d02-13-03{background:#0f172a}
        .d02-13-03-wrap{position:relative;width:100%;height:100%}
        .d02-13-03-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-6deg);white-space:nowrap;background:linear-gradient(90deg,#f59e0b,#ef4444);color:#fff;font-weight:800;font-size:15px;letter-spacing:.06em;padding:10px 28px;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.25)}

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