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

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。 リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボンや複雑な形状のリボンまでたくさんあります。リボンを実装するときには、ここを見ればコピペで簡単に実装できます。

[coliss]

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

[nmcli]

これそのまま h2～h6 に割り当てちゃったほうが便利そう

[h1rokey0401]

リボン

[securecat]

これはなかなか

[tmayuko312]

20年前はこれをtableで再現してたなんて若い世代は信じられんだろうな。猛者は画像も使ってなかった。

[Helfard]

面白いけどCSS見てるとクラクラするなあ。

[chiba1008]

リボン、手軽に実装できるのはいいんだけど、10年前くらいに流行ったデザインって印象でなあ…

[kotoripiyopiyo]

cas des

[rogertroutman]

セマンティックな意味を持たない装飾的な要素ならむしろ div こそ正しいですよ。また、CSSサンプルを見ればわかりますが div 以外の要素でもちゃんと機能します。

[poad1010]

この記事をおすすめしました

[blueboy]

　すぐに飽きる。　クリスマスに１回使って、それで終わり。

[Shinwiki]

divはリボンじゃないんやで。だいたいhtmlは構造だ、cssは見た目だ、って言っといてなんなんだこいつらはよ。

[monacal]

日本だとあまり使わなさそうなデザインではあるけど…うっかり必要になっていざ作ろうとすると面倒なんだよね。矢印とかも。