リボンをCSSで実装したSample

HTMLはdiv要素1つだけ


タイトル用

This is ribbon

上部横帯

This is ribbon

左上リボン

CSS
100%

左上リボン

CSS
100%

上部左側リボン

This is ribbon

Z型リボン

This is ribbon

左上横向きリボンの丸形

This is ribbon

上部横巻きリボン

This is ribbon

上部下巻きリボン

This is ribbon

リボンのシール的なやつ

CSS

左側の切れ目から出ているリボン

This is ribbon

両端を折り曲げたリボン

This is ribbon

ハートのリボン

CSS

左上からまくり上がるリボン

100%
CSS

右上からまくり上がるリボン

100%
CSS

上部の切れ目から出るリボン

100%
CSS

横に開いたリボンシール

CSS

折り返して複数行を表示するリボン

A Ribbon
With Many Lines
Of Text