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

斜め帯見出し(コーナーリボン)

四隅の一箇所に斜めの帯を固定配置した見出しリボンの見本です。WordPressの新着記事サムネイルやショップページの「新商品」表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-10-wrap">
          <div class="d02-13-10-ribbon">OPEN</div>
          <p class="d02-13-10-note">本日より新規オープンいたしました</p>
        </div>

CSS

.d02-13-10{background:#fff}
        .d02-13-10-wrap{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;padding-bottom:6px}
        .d02-13-10-ribbon{position:absolute;top:18px;right:-38px;transform:rotate(45deg);width:140px;text-align:center;background:#dc2626;color:#fff;font-weight:800;font-size:13px;letter-spacing:.1em;padding:5px 0;box-shadow:0 2px 6px rgba(0,0,0,.2)}
        .d02-13-10-note{font-size:12px;color:#64748b;margin:0;padding-left:4px}

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