CSS リボンの作り方

clip-path で帯・リボン状の見出しを作るコードを、実物プレビュー付きでコピーできます。

リボン状の帯は clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%) で作れます。両端の中央に頂点を作り内側へ凹ませると、リボンの切り込みになります。見出しやバッジに使えます。下にコピペ用コードを用意しました。

両端を切り込んだリボン

RIBBON

CSS

.ribbon {
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  -webkit-clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}

先端が尖ったリボン（左に切り込み）

SALE

CSS

.ribbon-tag {
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}

ポイントと注意点

切り込みの深さ：両端中央の頂点（8%・92%）を中央に寄せるほど切り込みが深くなります。
テキストの余白：切り込み分が文字に重ならないよう、左右に padding をとってください。
折り返しの影は擬似要素で重ねて表現します。本体の形は clip-path ジェネレーターで調整できます。

関連