Eight ribbons and labels: a diagonal corner ribbon, a ribbon folded around a card edge, a notched heading banner, a price tag, a hanging bookmark, a shiny gradient pill, a section ribbon with folded ends and a rosette award badge.
The classic ribbon across the top-right corner of a card, rotated 45 degrees and clipped by the card's overflow. The ribbon text is a real span inside the card, so it is read with the card content, and the card keeps its rounded corners.
View code
<article class="crn">
<span class="rib">Bestseller</span>
<h3>Stoneware mug</h3>
<p>Glazed by hand in small batches.</p>
<b>$24</b>
</article>
A ribbon that wraps around the left edge of a card, with a small dark triangle under it to suggest a fold. The fold is a pseudo-element drawn with borders, so the whole effect is CSS, and the ribbon colour is set by one custom property.
View code
<article class="fld" style="--rb:#7c3aed">
<span class="rb">New</span>
<h3>Course: Grid in a day</h3>
<p>12 lessons, all levels.</p>
</article>
A heading banner with notched tails on both ends, made with clip-path on a single element. It works for section titles and award labels, and the text stays a real heading so it remains part of the page outline.
A tag-shaped label with a pointed end and a punched hole, for prices and discounts. The shape is one clip-path polygon and the hole is a pseudo-element circle in the background colour, so it scales with the text.
A bookmark ribbon hanging from the top of a card with a V-shaped notch at the bottom, often used for Featured or Saved. The notch is a clip-path, and the text is short so it fits the narrow ribbon without wrapping.
View code
<article class="bkm">
<span class="bk">Top pick</span>
<h3>Linen apron</h3>
<p>Heavy linen, two deep pockets, adjustable strap.</p>
</article>
A pill ribbon with a gradient fill and a light sheen that sweeps across now and then, for premium labels. The sheen is a pseudo-element moved with a transform animation and is removed entirely for reduced motion.
A wide ribbon that spans a section with its ends folding behind, the classic shape for a headline over a pricing table or a certificate. The folds are two pseudo-elements in a darker shade placed behind the main band.
A rosette badge with a ringed circle and two hanging tails, drawn as a circle with a double ring from layered box-shadows and clip-path polygons for the tails. It works as a seal for awards or guarantees, and the text inside is real content.
Notches, arrows, tags and bookmarks are single elements cut with clip-path: polygon(), which keeps the markup tiny and scales with the text.
Corner ribbons
A corner ribbon is a rotated band positioned past the card's edge; overflow: hidden on the card trims it neatly, so the card keeps its rounded corners.
Keep it real text
Ribbon labels such as Bestseller or New should be text inside the card so they are read with it. Avoid putting important information only in a decorative graphic.
Use sparingly
If every card has a ribbon, none stand out. Reserve them for one or two items, and keep the words short so they fit narrow shapes.
Frequently asked questions
Do ribbons need images?
No. All eight are pure CSS.
Will clip-path work everywhere?
Yes, polygon clip-paths are supported in all current browsers.
How do I change the ribbon colour?
Edit the background, or the custom property in the folded ribbon demo.