角リボン（コーナーリボン）CSSジェネレーター

<div class="ribbon-card">
	<span class="ribbon-{{position}}">{{ribbon_text}}</span>
	<div class="card-content">
		<span class="card-title">Corner Ribbon</span>
		<p class="card-desc">リボンのついたカードのデザインプレビューです。</p>
	</div>
</div>

.ribbon-card {
	position: relative;
	width: {{card_width}}px;
	height: {{card_height}}px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	overflow: hidden; /* 角からはみ出た部分を隠す */
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	margin: 40px auto;
	/* カード中央寄せ */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.card-content {
	padding: 24px;
	z-index: 1;
}

/* リボンの共通スタイル */
[class^="ribbon-top-"] {
	position: absolute;
	/* カードの角を十分に覆うため、幅は広めに固定（または対角線に応じて調整） */
	width: 200%; 
	height: {{thickness}}px;
	background: {{bg_color}};
	color: {{text_color}};
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: {{font_size}}px;
	font-weight: bold;
	line-height: normal;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 10;
	white-space: nowrap;
}

/* 右上配置：中心を角の頂点に合わせ、対角線上にスライド */
.ribbon-top-right {
	top: 0;
	right: 0;
	transform: translate(50%, -50%) rotate(45deg) translateY({{ribbon_offset}}px);
}

/* 左上配置：中心を角の頂点に合わせ、対角線上にスライド */
.ribbon-top-left {
	top: 0;
	left: 0;
	transform: translate(-50%, -50%) rotate(-45deg) translateY({{ribbon_offset}}px);
}

.card-content .card-title {
	display: block;
	margin: 0 0 8px 0;
	color: #333;
	font-weight: bold;
	font-size: 1.2rem;
}

.card-content .card-desc {
	display: block;
	margin: 0;
	color: #666;
	font-size: 14px;
}