OneTaskBy Tim King · Updated
CSS Corner Ribbon Generator
Diagonal Banner for Cards and Sale Badges, Built From a Rotated Bar
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Corner Ribbon Maker works
This CSS corner ribbon generator hangs a label over a card corner without images. A corner ribbon is a bar rotated forty-five degrees and hung over the corner of a card, with the card's
own overflow: hidden doing the trimming. Pick a corner, a label and the colours, and the whole thing
is two rules and no image.
CSS corner ribbon generator: rotate and clip
Corner ribbons look fiddly and are not. Once you see that the ribbon is a plain rectangle and the corner shape comes entirely from clipping, the rest is arithmetic you can leave to the browser.
The card is the clip. The ribbon element is longer than the corner it crosses, so it sticks out on
both sides. Giving the card position: relative and overflow: hidden means anything outside its
rounded box simply is not painted, and the ribbon's ends are cut flush with the card's edges. This is why
the card needs a border radius set before the ribbon looks right — the clip follows the radius.
Positioning by the centre, not the edge. The ribbon is placed at an offset from the corner and then
moved back by half its own width and half its own height with translate(-50%, -50%). That puts its
centre exactly on the offset point, so changing the ribbon's length or padding does not move it — it
grows outward in both directions instead of drifting. Rotating afterwards spins it about that same
centre.
Rotation direction depends on the corner. A ribbon in the top-right or bottom-left corner runs from
lower-left to upper-right, which is rotate(45deg). Top-left and bottom-right run the other way, which
is rotate(-45deg). Get this wrong and the ribbon hangs off the wrong pair of edges — it is the only
part of the technique that has to change per corner.
Why not a pseudo-element. You can absolutely build this with ::before on the card, and plenty of
snippets do. A real element is easier to work with when the label is dynamic, because the text lives in
the markup rather than in a content string, which means it can be translated, selected and read by a
screen reader like any other text.
Order matters for pointer events. A ribbon sitting over a corner will intercept clicks meant for the
card, especially when the whole card is a link. Setting pointer-events: none on the ribbon lets clicks
pass straight through while the ribbon stays visible. It is a one-line fix for a bug that is very
annoying to diagnose.
Making it readable. Ribbon text is short, small and set at an angle, all of which hurt legibility. Uppercase with a little letter-spacing survives rotation better than mixed case, a semi-bold weight holds up at twelve pixels where a light weight vanishes, and the contrast between text and ribbon needs to clear 4.5:1 the same as any other text. Rotated text is also the first thing to look blurry on a non-retina screen, so avoid very thin fonts.
The folded-tail variant. Ribbons that appear to wrap around the card with a darker triangle tucked underneath need two extra triangles built with the border trick, positioned behind the bar. It is a noticeably more complex build for a decorative effect, and it does not survive a rounded corner well — worth it for a hero card, not for a grid of forty.
FAQ
Why does my ribbon stick out past the card?
Because the card is missing overflow: hidden, or the ribbon is not positioned inside it. The ribbon is
deliberately longer than the corner it crosses; the card's overflow is what trims the ends flush with its
edges.
How do I stop the ribbon blocking clicks on the card?
Add pointer-events: none to the ribbon. It stays fully visible but becomes transparent to the mouse, so
clicks and taps land on whatever is underneath — usually the card link the ribbon is decorating.
Why is the rotation different for each corner?
A diagonal across the top-right corner runs bottom-left to top-right, and a diagonal across the top-left corner runs the opposite way. The two pairs of opposite corners share a rotation direction, so there are only two values to worry about: 45 and −45 degrees.
Should the ribbon be an element or a pseudo-element?
A real element when the label is dynamic or needs to be readable by assistive technology, since text in
content is not reliably announced or translatable. A pseudo-element when the ribbon is purely
decorative and you would rather not add markup.
Does the ribbon work on a card with a border radius?
Yes — the clip follows the rounded outline, so the ribbon's ends curve with the corner. Very large radii eat into the diagonal, so a ribbon on a heavily rounded card usually needs a slightly larger corner offset to stay centred.
See also: all Shapes & SVG tools, Layout & Spacing, Shadows & Motion, UI Components, Forms & Inputs, Colour.
Related tools
Blob Generator
Make organic blob shapes with border-radius.
CSS Divider Generator
Slanted, curved, zigzag and wave section dividers in pure CSS.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
CSS Wave Generator
Wavy section edges from an inline SVG path, copied as CSS.
Emoji Favicon Maker
Any emoji into a one-line SVG favicon, no files.