A diagonal ribbon banner across a product card's corner — commonly reading "Sale," "New," or "Featured" — is a classic e-commerce and content card decoration, achieved with a rotated element positioned outside the card's normal content flow.
Customize the ribbon text and color with live controls, see it rendered diagonally across the corner of a sample card, then copy the complete HTML and CSS needed to add the same ribbon to your own product or content cards.
The technique rotates a positioned span 45 degrees and anchors it to the corner using absolute positioning, requiring the parent card to have `overflow: hidden` and `position: relative` for the ribbon to clip and align correctly within the card's boundary.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Frequently asked questions
What CSS does the parent container need for this to work correctly?
The parent card needs `position: relative` (so the ribbon can position against it) and `overflow: hidden` (so the ribbon's corners get clipped cleanly at the card's edge).
Can I place the ribbon on a different corner, like top-left?
Yes, adjust the positioning and rotation direction in the generated CSS — flipping the rotation angle and repositioning moves the ribbon to any of the four corners.