Highlight your best products. Visually design diagonal corner ribbons or folded bookmark flags, and generate the pure CSS instantly.
Everything you need to scale your application.
$49/mo/* Generated on cssgen.org */Whether you are highlighting a discount in an e-commerce store or drawing attention to the "Recommended" tier on a pricing page, ribbons are essential UI elements. However, positioning them correctly without breaking your card layouts can be a headache.
Our generator provides two of the most popular styles. The Diagonal Corner Ribbon uses the transform: rotate() property to slice perfectly across the corner of a container. The Folded Bookmark uses CSS pseudo-elements (the famous border triangle hack) to simulate a physical ribbon wrapping around the back of the card.
position: relative; and overflow: hidden;. If you forget overflow: hidden, the ribbon will stick out past the edges of the card and look broken.::before pseudo-element using transparent borders to create the 3D folding illusion.z-index (e.g., z-index: 10;) so it always renders on top of the product photo.First, ensure the parent container has position: relative and overflow: hidden. Then, give the ribbon position: absolute, place it near the top corner (e.g., top: 20px; right: -35px;), and rotate it using transform: rotate(45deg).
The 3D folded effect (where the ribbon wraps around the edge of a container) is created using a ::before pseudo-element. By utilizing the CSS border triangle hack with a darker shade of the ribbon's color, you can draw a small triangle that connects the overhanging ribbon back to the card edge.
You forgot to add overflow: hidden; to the parent container (the card). Because the ribbon is rotated, its edges physically extend past the boundary of the card. The overflow property clips off those extending edges, making it look flush.