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

八角形フレーム見出し

見出し全体を細い二重線の八角形フレームで囲むスタイル。会員証や認定バッジ風の見出しラベルに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="oct-outer">
            <div class="oct-inner">
              <h4 class="ttl">octagon</h4>
            </div>
          </div>
        </div>

CSS

.d02-10-27 .wrap{ text-align:center; }
        .d02-10-27 .oct-outer{ display:inline-block; padding:3px; background:#94a3b8; clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%); }
        .d02-10-27 .oct-inner{ padding:20px 30px; background:#fff; clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%); }
        .d02-10-27 .ttl{ all:unset; display:block; font-size:19px; font-weight:800; color:#1f2937; text-align:center; }

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