ほぼコピペでOK！CSSリボン形状の作成: 簡単にウェブデザインにリボンを追加する方法 [CSS Ribbon Shapes]

「CSS Generators」の「Ribbon Shapes」ページは、CSSリボンを簡単に作成できるオンラインツールを提供しています。
このツールを使うと、リボンの形、色、サイズを簡単にカスタマイズできます。
選んだデザインを調整し、生成されたCSSコードをコピーするだけで、リボンをすぐにウェブサイトに追加できます。
実際に試してみたい場合は、こちらのリンクからアクセスできます。

使い方

.ribbon-relative {
	position: relative;
}

<div class="ribbon-relative">
何か文字や画像を挿入
<div class="ribbon">リボンに表示する文字</div>
</div>

下記が実装サンプルになります

Your text content

Your
text
content

灰色のボックスにリボンが付いてないものを要素画像の上に貼り付けたい場合、さらに別途「absolute」要素を追加することで可能です。

.ribbon-relative {
	position: relative;
}
.ribbon-content {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
}

<div class="ribbon-relative">
	<img src="/wp-content/uploads/2025/01/DSC_0409-scaled.jpg" alt="花火画像" width="2560" height="1709" class="aligncenter size-full wp-image-1773 thumbnail" />
	<div class="ribbon-content">
		<div class="ribbon">Your<br>text<br>content</div>
	</div>
</div>

下記が実装サンプルになります

Your
text
content