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

ソフトリボン型見出し

左右を台形にカットした淡い色のリボン型で見出しを軽く囲むスタイル。案内欄やお知らせカードの見出しにやわらかい印象を与える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="ribbon">お知らせ</span>
        </div>

CSS

.d02-10-42 .wrap{ text-align:center; padding:20px; }
        .d02-10-42 .ribbon{ display:inline-block; padding:12px 34px; background:#e0f2fe; color:#075985; font-size:17px; font-weight:800; clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%); }

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