CSS-only folded ribbon
Create a cool Ribbon using one element and a few lines of code.
- Easy to update using CSS variables
- No hard-coded values
- Works with any text content
- Works with multi-lines of text
.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