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

斜めカット背景分割見出し

見出しの背景を斜めに切り取った色面で部分的に敷くスタイル。特集ページやマガジン風レイアウトの見出しに動きを与える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="cut"></span>
          <h4 class="ttl">特集記事</h4>
        </div>

CSS

.d02-10-40 .wrap{ position:relative; display:inline-block; padding:14px 30px; }
        .d02-10-40 .cut{ position:absolute; inset:0; background:#fef3c7; clip-path:polygon(0 0, 70% 0, 55% 100%, 0 100%); z-index:0; }
        .d02-10-40 .ttl{ all:unset; position:relative; z-index:1; display:block; font-size:20px; font-weight:800; color:#1f2937; }

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