20 CSS Ribbons

The convincing version has three parts, and most snippets ship only the first. The band itself is a rotated element pinned to the corner: give the card position: relative and overflow: hidden, then absolutely position the ribbon and rotate it 45 degrees. Make it roughly 1.5× wider than the corner it crosses so the ends run past the card edge and get clipped, rather than stopping short and revealing that it is a rectangle. Second, the tails — the small darker triangles that appear to fold behind the card — are what sell the wrap. Build them with ::before and ::after using border-color: transparent triangles or a small clip-path, filled with a darker shade of the ribbon colour derived via color-mix(in oklch, var(--ribbon) 70%, black). Third, the shadow: a tight filter: drop-shadow() follows the actual ribbon shape including its clipped edges, whereas box-shadow draws a rectangle around the unrotated box and looks wrong. One trap worth knowing: overflow: hidden on the card is what clips the ribbon ends, but it also clips any tooltip or dropdown inside that card — if you need both, use overflow: clip on the axis you actually want clipped.

The original was a 10KB PNG served from GitHub's own CDN, and it is still widely copied that way. The CSS version is under 40 lines, scales perfectly on any display, retheme-able in one line, and costs no network request. The structure is an <a> positioned fixed (or absolute within a relatively positioned hero) at the corner, rotated 45 degrees, given generous horizontal padding so the band extends past both card edges, with the text centred inside. Two details make it read as authentic: the thin light border inset from each long edge — a single box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.2) handles both — and a slight letter-spacing on uppercase text, which is what the original bitmap had. For accessibility, this is a real link, so it needs discernible text: the visible label "Fork me on GitHub" is usually enough, but if you shorten it to an icon, add an aria-label. Also keep the tap target at least 44 by 44 CSS pixels — a thin rotated band is easy to make too small to hit on mobile.

clip-path: polygon() lets you cut the entire ribbon silhouette — including the V-notch or swallowtail ends — from one element, with no pseudo-elements at all. A basic banner with notched ends is clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%): the two mid-edge points pull each end inward to a point. That is the whole shape. The advantages over the classic pseudo-element build are real — one element instead of three, no z-index juggling for the tails, and the shape animates smoothly because clip-path is interpolatable between polygons with the same number of points. Two caveats decide when to use it. First, clip-path clips everything in the element including its own ::before and ::after, so decorative extras have to live on a wrapper — this catches people out constantly. Second, a clipped element cannot cast a box-shadow, because there is no box left to shadow; use filter: drop-shadow() on the parent instead, which follows the clipped silhouette. Demo 20 is built this way as the reference.

This is the highest-converting ribbon on the list, and the mistakes are usually structural rather than visual. Place the band across the top of the featured card, either full-width flush with the card's top edge or as a floating pill overlapping the boundary. If it overlaps, the card needs overflow: visible and enough padding-block-start that the ribbon does not collide with the plan name — a common bug when the card is inside a grid with align-items: stretch. Give the featured card a slight scale(1.03) and a stronger shadow so the ribbon reinforces a hierarchy the layout already establishes rather than doing the work alone. On semantics: the ribbon is real information, not decoration, so it belongs in the document as text — not as a ::before with content: "Most Popular", which screen readers may skip and which no user can select or translate. Generated content is fine for the ribbon's tails; it is wrong for its label. If the card is a radio-selectable plan, wire the highlight from state with .card:has(:checked) so the ribbon follows the actual selection instead of being hardcoded to one plan.

The notched ticket edge comes from a repeating radial gradient used as a mask, not from drawing circles. Apply mask-image: radial-gradient(circle 8px at 8px 50%, transparent 98%, black 100%) with mask-size set to the notch spacing and mask-repeat: repeat-y — each repeat punches a semicircular bite out of the edge. Because it is a mask rather than an overlay, the notches are genuinely transparent, so whatever sits behind the coupon shows through; an overlay of background-coloured circles looks identical on a flat background and breaks instantly on a gradient or photo. Pair it with a border-left: 2px dashed on the tear line. Two production notes. Safari still wants the -webkit-mask-image prefix, and it is one extra line to keep the effect from vanishing entirely there. And if the coupon is interactive — a copy-code button, a claim action — that control must be a real <button>, not the whole card, so keyboard users get a single predictable target rather than a large ambiguous one.

The rule that resolves most cases: if the ribbon carries information, it is content; if it is ornament, it is decoration. A "Sale", "Sold Out" or "Most Popular" ribbon is content — put the words in the DOM as real text so they are announced, selectable and translatable. Only the folded tails and shading belong in ::before / ::after. Three further requirements. Never rely on colour alone: a greyed-out card means nothing to a colour-blind user, so "Sold Out" must appear as text, and the underlying control should be genuinely disabled or replaced with an enabled alternative like "Notify me" — a dimmed-but-clickable button is worse than no signal at all. Contrast still applies to rotated text: a 45-degree band does not exempt it from the 4.5:1 requirement, and light-on-bright-red is the usual failure. Finally, rotation must not be the only cue for meaning, and any animated ribbon — the unfold, the waving flag, the slide-in notification — needs a prefers-reduced-motion: reduce guard that settles it into its final visible state rather than removing it.

Match the ribbon to the commercial intent of the surface. E-commerce product grids want corner ribbons — sale, bestseller, sold out — because they read at thumbnail size and survive being one card among twenty; that is why Shopify, WooCommerce and BigCommerce themes all ship variations of the same corner band. SaaS pricing tables want the horizontal top band, since "Most Popular" needs to be read before the price and a corner ribbon competes with the plan name. Blog and content cards suit the smaller notched corner badge, which marks New or Updated without overpowering a headline. Open-source project pages have their own convention in the fork-me corner ribbon, and deviating from it costs recognition. Award rosettes and certificate seals belong on trust surfaces — testimonial sections, comparison pages, about pages — where the visual weight is justified. Coupon ribbons carry the dashed tear-off edge because that shape is a learned signal for redeemable value. The general rule: the ribbon should be the second thing seen, after the product or the price. If it is the first, it is too heavy for its job.

The 16 pure-CSS ribbons port with no work — copy the markup and the scoped .rib-NN rules and they behave identically anywhere, because there is no JavaScript to place in a lifecycle. In component terms, the natural shape is a small presentational component taking a label and a variant: <Ribbon label="Sale" variant="corner" />, with the colour driven by a CSS custom property so themes stay in CSS rather than in props. The four demos with JavaScript — the hanging bookmark toggle, the coupon copy action, the slide-in notification, and one hover enhancement — wire into the usual hooks: useEffect with a returned cleanup in React, onMounted plus onBeforeUnmount in Vue, onMount returning cleanup in Svelte, and 'use client' for those four in the Next.js App Router while the other 16 render fine as server components. For Tailwind v4, padding, colour and positioning map to utilities directly; the parts with no utility equivalent — clip-path: polygon(), mask gradients, keyframes — belong in a @theme block or an arbitrary-value class. Each ribbon is roughly 1-3KB of CSS.