HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。

リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボンや複雑な形状のリボンまでたくさんあります。リボンを実装するときには、ここを見ればコピペで簡単に実装できます。

CSS Ribbon Shapes

CSS Ribbon Shapesを作成したのは以前紹介したCSS Loaders（紹介記事）と同じ作者で、前回はCSSで実装されたローダーでしたが、今回は100種類以上のリボンです。

CSS Ribbon Shapes

まずは、リボンの実装方法から。
各リボンをホバーし「Copy the CSS」をクリックすると、CSSがコピーできます。

各リボンをクリック

HTMLはすべて共通で、div要素一つです。

あとは、さきほどのCSSをペーストするだけ。
※コピーしたCSSにはコメントでHTMLも含まれていました。

リボンは、コピペするだけで簡単に実装できます。

See the Pen
Untitled by coliss (@coliss)
on CodePen.

CSSで実装されたリボンは現在、100種類以上あり、シンプルなリボンからかなり複雑なリボンまであります。

CSS Ribbon Shapes

CSS Ribbon Shapes

CSS Ribbon Shapes

CSS Ribbon Shapes

CSS Ribbon Shapes

CSS Ribbon Shapes

こんな複雑なリボンもdiv要素一つだけで実装できます。

CSS Ribbon Shapes