パーツ番号 02-07-29 ・ CSSのみ

三角マーカー見出し

見出しの両脇にCSSで描いた小さな三角形を内向きに配置するスタイル。注目してほしい特徴紹介や強調ポイントの見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="tri tri-r"></span>
          <h4 class="ttl">おすすめポイント</h4>
          <span class="tri tri-l"></span>
        </div>

CSS

.d02-07-29 .wrap{ display:flex; align-items:center; justify-content:center; gap:14px; }
        .d02-07-29 .tri{ width:0; height:0; display:block; flex-shrink:0; }
        .d02-07-29 .tri-r{ border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid #dc2626; }
        .d02-07-29 .tri-l{ border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:12px solid #dc2626; }
        .d02-07-29 .ttl{ all:unset; font-size:21px; font-weight:800; color:#1f2937; }

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