UPDATE:2024.1.19
- CATEGORY
コピペで簡単! 様々な形のリボンをCSSで作れる「Ribbon Shapes」の紹介
![](https://apricot-design.com/wp2023/wp-content/uploads/2024/01/Ribbon.jpg)
しかし「作れる」けれども、「”簡単に”作れる」わけではありませんよね。
とくに個人的に作るのが面倒だなと思うのは装飾のリボン。
![](https://apricot-design.com/wp2023/wp-content/uploads/2024/01/Ribbon-sample.jpg)
コピペで作れたら本当に楽なのにな……と、そんな願いをかなえてくれるサイトを紹介です。
「Ribbon Shapes」を使えばとても簡単にCSSでリボンを作ることができます。
HTMLはdiv要素を一つ用意するだけ。
あとは使いたいリボンのCSSをコピペするだけで百種類以上のリボンデザインを表現できるのです。
![](https://apricot-design.com/wp2023/wp-content/uploads/2024/01/Ribbon-Shapes-1.jpg)
中には「本当にこれはdiv要素一つで作られているのか…?」と驚いてしまうようなリボンも……
![](https://apricot-design.com/wp2023/wp-content/uploads/2024/01/Ribbon-Shapes-2.jpg)
リボンの色を変えるなども簡単なので、デザインにリボンの表現があるときはぜひ活用したいサイトですね◎