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

リボンタグ見出し

見出しテキストをclip-pathで作った旗形のリボンで包み込む静的な装飾。WordPressのセール告知やおすすめ商品ラベルなど、目を引くバッジ的な見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="ribbon">SALE</span>
        </div>

CSS

.d02-10-11 .wrap{ text-align:center; padding:36px 20px; }
        .d02-10-11 .ribbon{ position:relative; display:inline-block; padding:14px 40px 22px; background:#ef4444; color:#fff; font-size:15px; font-weight:800; letter-spacing:.06em; clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); }

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