ことれいのもり
2025-05-26
CSSでリボン風のデザインを作るとき、「上の四角い部分にはきれいなグラデーションをかけられるのに、下に伸びる三角部分にはグラデーションが効かない...」といった経験はありませんか？
擬似要素（::after）で作る三角部分にはグラデーションを直接使えないため、上の部分と下の部分で見た目に差が出てしまうことがあります。
しかし、グラデーションが使えなくても、色の工夫次第でそれっぽく見えるようにすることができます！
この記事では、CSSのグラデーションが使えない場所で見た目上グラデーションに見える色合いを紹介します。
完成イメージは次の通りです。
これは本ブログの人気記事一覧で実際に使用しているものです。
1, 2, 3それぞれ上の四角い部分にはグラデーションが適用されていますが、下の三角部分は単色になっています。
よく見ると違う色になっていると思いますが、ぱっと見ただけでは違和感に気づかないと思います。
このリボンデザインは、「CSSで作る！綺麗なWeb用リボンデザイン22選」を大いに参考させていただきました。
リボンの形状や装飾のバリエーションがとても豊富で、実装のベースとして非常に役立ちました。
また、金・銀のグラデーションカラーは「CSSで色を限りなくゴールドやシルバーに近づける」の記事を参考にしています。
この記事で紹介されている配色を参考にして、銅色のグラデーションを独自に作成しました。
これらの素晴らしい記事をベースに、今回はリボン全体をグラデーションのように見せる実装方法を紹介していきます。
まずは、全てに共通するリボンの基本構造のCSSから紹介します。
この部分には、配置や形状、下部の小さな三角（::after）の描画が含まれています。
.ranking-badge {
display: inline-block;
position: absolute;
top: 0;
left: 10px;
margin: 0;
padding: 6px 0;
z-index: 2;
width: 30px;
text-align: center;
font-size: 12px;
color: white;
background: #ff785b;
}
.ranking-badge::after {
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 15px solid;
border-right: 15.5px solid;
border-bottom: 8px solid transparent;
}次に、ランキング順位に応じて使い分ける色のグラデーションと、その下の三角部分の色を紹介します。
三角部分はグラデーションではなく単色ですが、もしグラデーションがかかっていたらこれぐらいの色だろうという近い色を指定しています。
これにより、本来グラデーションがかかっていない部分でもグラデーションのように見せています。
/*==============================*/
/* 1位: 金色グラデーション */
/*==============================*/
.ranking-badge.gold {
background: linear-gradient(
45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%
);
color: #fff;
box-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
}
/* 金色の三角部分 */
.ranking-badge.gold::after {
border-right-color: #d6a92d;
border-left-color: #be830c;
}
/*==============================*/
/* 2位: 銀色グラデーション */
/*==============================*/
.ranking-badge.silver {
background: linear-gradient(
45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%
);
color: #fff;
box-shadow: 0 0 6px rgba(192, 192, 192, 0.7);
}
/* 銀色の三角部分 */
.ranking-badge.silver::after {
border-right-color: #a09d9d;
border-left-color: #757575;
}
/*==============================*/
/* 3位: 銅色グラデーション */
/*==============================*/
.ranking-badge.bronze {
background: linear-gradient(
45deg, #8C4A2F 0%, #B87333 45%, #FFD2A6 70%, #B87333 85%, #8C4A2F 90% 100%
);
color: #fff;
box-shadow: 0 0 6px rgba(205, 127, 50, 0.7);
}
/* 銅色の三角部分 */
.ranking-badge.bronze::after {
border-right-color: #a05f1e;
border-left-color: #914b2f;
}この記事では、金・銀・銅色のリボンの下の三角部分を、グラデーションに近い色にすることでそれっぽく見える方法を紹介しました。
この方法なら、実際にグラデーションにしなくても気づかない程度の見た目になるのでオススメです！