[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート

「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ：div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd

[vitaminsii]

参考になります。

[kazuya6012]

リボン

[lotus_tribal]

いつか使うかなぁ？

[abeshin22]

気になるぅ→ [CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート

[forcutie]

リボン

[warriorking]

(CSS)画像やパネルに斜めにしたリボンを重ねるスタイルシート | コリス

[nao14115]

画像やパネルに斜めにしたリボンを重ねるスタイルシート

[Donca]

✔ [CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート