KAKERU Designing トミー（末富将也）

画像の角を切る・リボンを付けるCSS｜clip-pathで斜めの角、斜めの帯・飛び出すリボン・しおり、コピペ4種類と使いどころ

画像の角とリボンをCSSで作る。角を切った画像・斜めの帯・飛び出すリボン・しおりの見本とコード

写真の角を斜めに切る。カードの角に「NEW」の帯をかける。おすすめの商品に、紙のリボンのような札を付ける。どれも画像を加工しなくても、CSSだけで作れます。元の写真はそのままなので、あとで写真を差しかえても、角の形やリボンはそのまま残ります。

使いどころは「並んだカードの中で、1つか2つだけに目を向けてほしいとき」です。全部のカードにリボンを付けると、どれも目立たなくなります。角を切る形は、サイト全体の印象をそろえたいときに、写真すべてに同じ形で使います。

この記事の要点

  • clip-path: polygon() で画像の角を斜めに切り、transform: rotate() と overflow: hidden で角に斜めの帯、position と ::before で端から飛び出すリボンを作れる
  • 使いどころは、並んだカードのうち1〜2枚だけに「新着」「おすすめ」を添えるとき。角を切る形は、サイト全体で同じ形にそろえて使う
  • リボンの文字は画像にせずHTMLの文字で書き、色だけで意味を伝えない。白い文字なら背景色は4.5対1以上の濃い色にする。帯の文字は短く
トミー

連載「WEBの技術」の37回目です。
今回は、画像の角を切る形と、カードに付けるリボン。お店や商品の一覧でよく見る部品です。

この記事の内容は、無料の道具でも試せます

clip-path メーカー

点を動かすだけで、写真を好きな形に切り抜くCSSが出る（登録なし）

道具で試してみる →

完成見本：角の形とリボン4種類

1は画像そのものの角を切っています。2〜4は「画像＋見出し」のカードに、リボンを重ねています。リボンの文字は、どれも画像ではなくHTMLの文字です。

CLIP-PATH: POLYGON()1. 画像の角を斜めに切る写真の多いページを、少しだけシャープな印象に
TRANSFORM: ROTATE()2. 角に斜めの帯をかける新着・期間限定など、短いひと言を付けるとき
POSITION ＋ ::BEFORE3. 端から飛び出すリボンおすすめのプランや商品を1つだけ目立たせるとき
WRITING-MODE ＋ CLIP-PATH4. しおりのような縦のリボン順位やおすすめを、画像の邪魔をせず添えるとき

※ 見本の画像はイラストです。見本は読み上げソフトでは読まれないようにしています（コピペ用のコードは、そのまま読み上げられる形です）。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-cr は、サイトのほかのデザインと名前がぶつからないようにするための目印です。2〜4は、同じカードのCSS（.kd-cr-card など）にリボンのCSSを足す形です。2〜4をまとめて使うときは、カードのCSSは1回だけ入れれば足ります。

1. 画像の角を斜めに切る

clip-path（要素のうち、指定した形の中だけを見せる指定）に polygon()（点を順に結んだ多角形）を使い、左上と右下の角を24pxずつ斜めに切ります。点は「横の位置 縦の位置」の組で、左上から時計回りに6つ並べています。calc(100% - 24px) は「右端（下端）から24px手前」という意味です。

HTML
<img class="kd-cr-cut" src="画像のURL" alt="画像の内容" width="1200" height="800">
CSS
.kd-cr-cut {
  display: block;
  max-width: 100%;
  height: auto;
  /* 左上と右下の角を、24pxずつ斜めに切る（6つの点を順に結んだ形だけ見せる） */
  clip-path: polygon(
    24px 0, 100% 0,
    100% calc(100% - 24px), calc(100% - 24px) 100%,
    0 100%, 0 24px
  );
}

2. 角に斜めの帯をかける

帯を position: absolute（カードを基準に、好きな位置に置く指定）で右上に置き、transform: rotate(45deg)（45度かたむける指定）で斜めにします。帯はわざとカードより長くしておき、カードに付けた overflow: hidden（はみ出した部分を隠す指定）で、両端をカードの角に沿って切ります。

HTML
<div class="kd-cr-card kd-cr-band-card">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
  <p class="kd-cr-title">海辺のカフェ特集</p>
  <span class="kd-cr-band">NEW</span>
</div>
CSS
/* 2〜4に共通：画像と見出しのカード */
.kd-cr-card {
  position: relative;
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid #DCE4EA;
  border-radius: 12px;
}
.kd-cr-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px 11px 0 0;
}
.kd-cr-title {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}

/* カードからはみ出した部分を隠す（帯の両端を角で切る） */
.kd-cr-band-card {
  overflow: hidden;
}
.kd-cr-band {
  position: absolute;
  top: 18px;
  right: -34px;
  width: 130px;
  padding: 4px 0;
  /* 帯を45度かたむけて、右上の角に斜めにかける */
  transform: rotate(45deg);
  background: #DC2626;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  text-align: center;
}

3. 端から飛び出すリボン

リボンを left: -8px でカードの左の線より8px外に出し、その下に ::before（要素の中の最初に、CSSだけで部品を足す指定）で小さな濃い三角を足します。三角が「リボンの裏側に折り返した部分」に見えるので、紙のリボンをカードに巻いたような形になります。こちらはカードの外に出すので、overflow: hidden は付けません。

HTML
<div class="kd-cr-card">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
  <p class="kd-cr-title">はじめての方向けプラン</p>
  <span class="kd-cr-flag">人気No.1</span>
</div>
CSS
/* 2〜4に共通：画像と見出しのカード */
.kd-cr-card {
  position: relative;
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid #DCE4EA;
  border-radius: 12px;
}
.kd-cr-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px 11px 0 0;
}
.kd-cr-title {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}

.kd-cr-flag {
  position: absolute;
  top: 14px;
  /* カードの左の線より、8px外に出す */
  left: -8px;
  padding: 5px 14px 5px 12px;
  background: #0369A1;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 4px 4px 4px 0;
}
/* 外に出した8pxの下に、裏側に折り返したような濃い三角 */
.kd-cr-flag::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 8px;
  height: 8px;
  background: #0C4A6E;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

4. しおりのような縦のリボン

細長い札をカードの右上に置き、writing-mode: vertical-rl（文字を縦書きにする指定）で文字を縦に並べます。下の端は、1と同じ clip-path: polygon() で、真ん中だけ10px上に切れ込ませて、本のしおりの形にしています。

HTML
<div class="kd-cr-card">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
  <p class="kd-cr-title">秋の海を見に行く旅</p>
  <span class="kd-cr-mark">おすすめ</span>
</div>
CSS
/* 2〜4に共通：画像と見出しのカード */
.kd-cr-card {
  position: relative;
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid #DCE4EA;
  border-radius: 12px;
}
.kd-cr-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px 11px 0 0;
}
.kd-cr-title {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}

.kd-cr-mark {
  position: absolute;
  top: 0;
  right: 16px;
  width: 36px;
  padding: 8px 0 18px;
  background: #B45309;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  /* 文字を縦書きに */
  writing-mode: vertical-rl;
  /* 下の真ん中に、しおりのような切れ込み */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}

仕組み：切るのは clip-path、重ねるのは position

clip-path は「見せる範囲」を決めるだけ

1の clip-path は、画像を削っているのではなく、「この形の内側だけを見せる」と決めているだけです。MDNの説明でも、形の内側は表示され、外側は表示されない、とされています。画像のファイルはそのままなので、CSSを1行消せば元の四角に戻ります。MDNでは、clip-path と polygon() はどちらも「Baseline Widely available」（主なブラウザで広く使える）と表示されています。

polygon() の点は、左上を「0 0」、右下を「100% 100%」とした位置で書きます。見本では、左上の角の代わりに「24px 0」と「0 24px」の2点を置いているので、その2点を結ぶ斜めの線で角が切れます。右下も同じ考え方で、calc(100% - 24px) の2点を置いています。4のしおりの切れ込みも、下の真ん中に「50% calc(100% – 10px)」という点を1つ足しただけです。

リボンは、カードを基準に重ねる

2〜4のリボンは、どれも position: absolute で置いています。基準になるのは、position: relative を付けたカードです。カードの大きさが変わっても、リボンは「カードの右上から何px」の位置に付いてきます。

2の帯は、130pxの帯を45度かたむけて、カードの右上の角にかけています。かたむけた帯の両端はカードの外にはみ出すので、カードに overflow: hidden を付けて、はみ出した部分を表示しないようにしています。これで、帯の両端がカードの上の線と右の線でまっすぐ切れて、角に巻いたように見えます。

3は逆に、リボンをわざとカードの外に8px出しています。その8pxの下に、::before で直角三角形を足しています。三角は clip-path: polygon(0 0, 100% 0, 100% 100%) で作っていて、リボンより濃い色にすると、リボンがカードの裏へ回り込んでいるように見えます。

HTMLの順番と、見た目の位置は別

2〜4のHTMLでは、リボンの文字を見出しのあとに書いています。position: absolute は見た目の位置を動かすだけなので、画面の上ではリボンが画像の上に乗っていても、読み上げソフトは「海辺のカフェ特集、NEW」のように、見出しを先に読みます。リボンをHTMLの最初に書くと「NEW、海辺のカフェ特集」になり、一覧を聞いている人には、どのカードの話か分かりにくくなります。

数値を変えるとどうなるか

角を切る大きさ

8px：気づかれにくい
24px（見本）
48px：絵が欠ける

8px（左）は、切ってあることに気づかれにくく、ただの小さな欠けに見えます。48px（右）は形が強く、写真の端にある絵が欠けます。カードの幅が300px前後なら、20〜30pxが「意図して切った形」に見える範囲です。写真の大事な部分が角にない画像で使います。

帯の文字と、overflow: hidden

NEW（見本）
長い言葉：両端が欠ける
overflow: hidden なし

斜めの帯は、角に近いところほど見える長さが短くなります。「期間限定セール」（中）のように長い言葉を入れると、両端の文字がカードの角で切れてしまいます。帯に入れるのは「NEW」「SALE」「限定」くらいの短い言葉です。長い言葉を付けたいときは、3の飛び出すリボンを使います。overflow: hidden を外す（右）と、帯の端がカードの外にそのまま出て、角に巻いた形になりません。

変えるところ指定今回の値目安
角を切る大きさpolygon() の px24px20〜30px（幅300px前後のとき）
帯の位置top / right18px / -34px帯の長さを変えたら、文字が真ん中に来るように一緒に直す
帯の文字中の文字NEW（3文字）英字4〜5文字、日本語2〜3文字まで
リボンの飛び出しleft と ::before の幅-8px と 8px同じ数字にそろえる

スマホと、見る人への配慮

リボンの色と文字のコントラスト

#0EA5E9：白い文字と2.8対1
#0369A1（見本）：5.9対1

リボンは小さな文字を色の上にのせる部品です。白い文字の場合、KAKERUブルー（#0EA5E9）の上では明るさの差が約2.8対1で、W3Cの基準（ふつうの大きさの文字で4.5対1以上）に届きません。見本では、帯を #DC2626（約4.8対1）、飛び出すリボンを #0369A1（約5.9対1）、しおりを #B45309（約5.0対1）にしています。赤も、明るい #EF4444 にすると約3.8対1まで下がります。

色だけで意味を伝えない

「赤い角はセール中」のように、色だけで意味を決めると、色の見分けがつきにくい人には伝わりません。W3Cの基準でも、色だけで情報を伝えないことが求められています。リボンには、必ず「NEW」「おすすめ」のように言葉を入れます。言葉が入っていれば、画像を読み込めなかったときも、ページを翻訳したときも、意味が残ります。

強制カラーモードでは、形と文字が残る

Windowsの「コントラスト テーマ」のように、OSが決めた少ない色だけで表示する設定（強制カラーモード）では、MDNによると、背景や文字の色がOSの色に置きかわります。Chromeでこの表示を再現して確かめたところ、リボンの赤や青は背景と同じ色になりましたが、文字と、clip-path で切った形は残りました。リボンの文字を画像にしていないので、この設定でも「NEW」「おすすめ」は読めます。

切る相手は、画像にする

clip-path は形の外側をすべて表示しないので、リンクやボタンに付けると、キーボードで選んだときに出る枠（フォーカスの枠）の一部も見えなくなります。角を切るのは画像（img）にして、リンクやボタンそのものには付けないようにします。2の帯で使う overflow: hidden も、カードの外にはみ出す部分を隠すので、カードの中にリンクを置くときは、キーボードで選んだときの枠が切れていないかを確かめます。

やりすぎ注意

1つのページで、リボンの種類は1つにそろえます。帯と飛び出すリボンとしおりが混ざると、どれが一番目立たせたいものなのか分からなくなります。リボンを付けるカードも、並んだ中の1〜2枚に絞ります。

トミー

リボンは、付けた瞬間は目を引きますが、全部に付けると「全部が普通」に戻ります。
付けるカードを選ぶことが、そのままデザインの仕事です。

AIに頼むなら

角の形やリボンは、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「どこに付けるか」「どんな言葉か」「色のコントラスト」まで伝えると、手直しが少なく済みます。

商品カード（画像＋見出し）の右上の角に、45度の斜めの帯で「NEW」と入れるCSSを作って。
帯の両端はカードの角で切れる形にして、文字は白、背景は白い文字と4.5:1以上の濃い赤に。
リボンの文字はHTMLの文字で、見出しのあとに書く形にして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • リボンの文字が画像や疑似要素の content になっていないか。::before の content: "NEW" で文字を入れる形は、MDNで「読み上げソフトに確実には伝わらない」とされています。HTMLの文字で書く形にします
  • スマホ幅で、帯の文字が角で欠けていないか。カードが小さくなったとき、斜めの帯の文字が切れていないか、いちばん狭い幅で確かめます
  • リンクやボタンに clip-path や overflow: hidden が付いていないか。キーボードのTabキーでカードを選び、フォーカスの枠が切れずに見えるかを確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • 商品やプランの一覧で、1つだけおすすめを示すとき。3の飛び出すリボンで「人気No.1」「はじめての方に」と添えます。比べている人が、最初にどれを見ればいいか分かります
  • お知らせや施工事例の一覧の、新しいものだけ。2の斜めの帯で「NEW」を付けます。公開から2週間など、外す時期も先に決めておきます
  • サイト全体の写真の形をそろえるとき。1の角を切る形を、一覧の写真すべてに同じ大きさで使います。1枚だけ形を変えるより、印象がそろいます

使わない場面

  • 一覧の全部のカードにリボンを付けること。全部に付けると、どれも目立たなくなります
  • 大事な情報をリボンだけに書くこと。「残り3席」「本日まで」のような大事な情報は、リボンだけでなく本文にも書きます。小さな帯は、見落とされることがあります
  • 写真の大事な部分が角にある画像。人の顔や商品が角に近い写真は、角を切ると欠けます。切る前に、写真の構図を確かめます
トミー

KAKERUなら、リボンは「いつ付けて、いつ外すか」を先に決めます。
「NEW」が半年残っているサイトは、かえって更新していないように見えるからです。

まとめ

  • 画像の角は clip-path: polygon() で切れる。画像のファイルはそのままで、CSSを消せば元に戻る
  • 斜めの帯は position: absolute ＋ rotate(45deg)、両端はカードの overflow: hidden で切る
  • 飛び出すリボンは left をマイナスにして、::before の三角で折り返しを作る
  • リボンの文字はHTMLで、見出しのあとに書く。白い文字なら背景は4.5対1以上の濃い色に
  • 帯の言葉は短く。リボンを付けるのは、並んだ中の1〜2枚だけ

まずは2のコードをコピーして、自分のサイトのカードに「NEW」を付けてみてください。そのあと、帯の位置や色を少しずつ変えると、カードの角にきれいに収まる数字がつかめます。polygon() の点の並びを目で見ながら作りたいときは、clip-pathの形を作る道具も使えます。

参考にした資料

いずれも2026年10月31日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

丸い画像・好きな形の画像をCSSで作る。つぶれない円の作り方と、使う・使わないの判断
関連記事丸い画像・好きな形の画像をCSSで作る｜つぶれない円の作り方と、コピペで使える5種類
画像の上の文字を読みやすくするCSSの重ね方 コピペで使える5種類と、写真が替わっても読める濃さ
関連記事画像の上の文字を読みやすくするCSS｜コピペで使える5種類と、写真が替わっても読める濃さ
画像に乗せるとズームする動きをCSSだけで コピペで使える5種類と、まわりを崩さない書き方
関連記事画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方
見出しの飾りをCSSで作る。左線・下線・マーカー・両側の線の見本とコード
関連記事見出しの飾りをCSSで作る｜左線・下線・マーカー・両側の線・枠、コピペ5種類と選び方

次に読む

この技術を作れる無料の道具clip-path メーカーWEB技術・前の回進み具合のバー（プログレスバー）をCSSで作る｜progress要素の色・しま模様・読み込み中・ステップ表示、コピペ4種類と使いどころ
画像の角とリボンをCSSで作る。角を切った画像・斜めの帯・飛び出すリボン・しおりの見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事