How is the ribbon rendered?

Pure CSS: clip-path shapes the ribbon ends, transform places it at the corner. No image assets; the content is a data-attribute on the target element.

All four — top-left, top-right, bottom-left, bottom-right. Useful for 'NEW', 'BETA', 'SALE' labels on cards.

Does it affect the element's layout?

No — the ribbon is absolutely positioned inside the card with `overflow: hidden`, so the card's dimensions stay intact.

Can the text be long?

Short is best — 6–10 characters. Longer text needs a smaller font or a bigger ribbon; the tool caps width automatically.

CSS Ribbon Builder | DevTools Surf

DevTools Surf

Example: CSS Ribbon Builder

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

color=#ef4444

Output

.ribbon { position: relative; }
.ribbon::before {
  content: attr(data-ribbon); position: absolute; top: 12px; left: -8px;
  padding: 4px 12px 4px 10px; background: #ef4444; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}

About CSS Ribbon Builder

Build a corner ribbon label using clip-path — content via data-ribbon attr. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

E-commerce developers adding 'Sale' or 'New' badges to product cards
Marketing teams labeling featured content with corner ribbon banners
SaaS designers marking premium features with 'Pro' or 'Beta' ribbons
Frontend developers generating clip-path ribbon CSS without manual math

Tips

The ribbon uses CSS clip-path for clean angled edges without images
Content is set via a data-ribbon attribute for easy text customization
Position the ribbon in any corner with a simple class name change

Fun Facts

The CSS clip-path property replaced the old clip property (deprecated in CSS2) and added support for shapes like polygon(), circle(), and ellipse() — enabling ribbon angles without images.
Corner ribbons were originally created using rotated absolutely-positioned elements with overflow hidden — the clip-path approach reduces the required CSS from ~40 lines to ~10.
The ribbon UI pattern originated from physical retail 'corner fold' stickers on product packaging — it was one of the first skeuomorphic patterns adopted in web design around 2008.

FAQ

How is the ribbon rendered?: Pure CSS: clip-path shapes the ribbon ends, transform places it at the corner. No image assets; the content is a data-attribute on the target element.
Which corners work?: All four — top-left, top-right, bottom-left, bottom-right. Useful for 'NEW', 'BETA', 'SALE' labels on cards.
Does it affect the element's layout?: No — the ribbon is absolutely positioned inside the card with `overflow: hidden`, so the card's dimensions stay intact.
Can the text be long?: Short is best — 6–10 characters. Longer text needs a smaller font or a bigger ribbon; the tool caps width automatically.

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus