Skip to main content
CSS Tip

CSS-only folded ribbon

Create a cool Ribbon using one element and a few lines of code.

A CSS ribbon

.ribbon {
--f: 10px; /* control the folded part*/
--r: 15px; /* control the ribbon shape */
--t: 10px; /* the top offset */

position: absolute;
inset: var(--t) calc(-1*var(--f)) auto auto;
padding: 0 10px 0 calc(10px + var(--r));
clip-path:
polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
var(--r) calc(50% - var(--f)/2));
background: #BD1550; /* the main color */
border-bottom: var(--f) solid #0005;
}

See the Pen CSS only ribbon by Temani Afif (@t_afif) on CodePen.

More detail: www.freecodecamp.org/news/make-a-css-only-ribbon

More Ribbons #