DEV Community

Cover image for I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection πŸŽ€
Temani Afif
Temani Afif

Posted on

I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection πŸŽ€

It's time for another collection! After the loaders, the hover effects, and the background patterns, let's make some Ribbon Shapes!


πŸ‘‰ CSS Ribbon Shapes πŸ‘ˆ


More than 100 CSS-only Ribbon Shapes that are made using a single element. Yes, only one element per shape (even the most complex ones).

Stop looking at CSS Ribbons made with old and obsolete code. Mine are made with modern CSS and optimized with CSS variables. There are no magic numbers or fixed dimensions. All the shapes fit whatever content you put inside them and you can easily control them by adjusting a few variables.

What are you waiting for? All it takes is one click to copy the CSS of any ribbon shape.


You will find the classic ribbons but a lot of new and fancy ones. I won't detail all of them but here are some of my favorites.

The Multi-line Ribbons

Probably the ones I like the most. It was a bit challenging to create a repeating shape that fit multi-line text. In the end, The final result is satisfying.

CSS only ribbon shapes with many lines of text

Here are two interactive demos where you can edit the text and see how the shape adjusts to fit the content.

The Curved Ribbons

It wasn't easy to combine straight text with a curved shape but I found a few interesting ideas

CSS only ribbon with curved shapes

The Infinite Ribbons

A Ribbon that never ends? why not! You will find a few of them that extend to the edge of the screen in any direction you want (top, bottom, right, left).

CSS-only infinite ribbon shapes

They are built without pseudo-elements and won't create any overflow issues. Here are two demos to illustrate some of them (best viewed at full screen)


What about you? Which one do you like? πŸ‘‡

You can get a unique link for each ribbon. If you like the #54 then the link is: https://css-generators.com/ribbon-shapes/#r54

You can easily share your favorite Ribbon Shape!


If you want to know the secret behind building such shapes, I have written a few articles that you can find here: https://css-articles.com

I will be writing more in the future so make sure to subscribe to my RSS feed to not miss them.

I also shared a lot of CSS Tips around ribbon shapes so make sure to also subscribe to the RSS feed of my CSS Tip website



You want to support me?

buy me a coffee

OR

Become a patron

Top comments (14)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Love these bud! πŸ”₯πŸ’—

Was really impressed when I saw the multi-line one on Twitter (X)...they are really smart! πŸ’ͺ🏼

For anyone wondering how to fix the broken ones (as Firefox doesn't support "lh" units in older / still current versions) you can manually set that property or use CSS vars to set a font size and a line height property that you can then use.

I am sure Temani has an even simpler solve, but this worked for me:

.ribbon {
    --ribbon-line-height: 1.8; /* added line height var */
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: .5em; /* control the folded part */

  position: absolute;
  top: 0;
  right: 0;
  line-height: var(--ribbon-line-height); /* changed */
  padding-inline: calc(1em * var(--ribbon-line-height)); /* changed */
 [...continued]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
afif profile image
Temani Afif

Actually, an easy fix is to map 1lh to 1.8em (if for example you are setting line-height: 1.8). In the codepen (like the multi-line ones) I am including the fallback but I am not doing this for the collection because the support will be good starting from next week and I am hiding half the ribbons on Firefox.

A lazy move but it would be a lot of effort to add all the fallbacks that will be useful for only a short period of time.

Collapse
 
afif profile image
Temani Afif

A lot of shapes are for sure broken on Safari so if you have the time to identify the bug it would be good if you can report it.

A few shapes relies on the "lh" unit that will land soon on Firefox so you won't see the full collection on Firefox before the end of the month.

Collapse
 
citronbrick profile image
CitronBrick

Does it work on iOS Safari ?

Collapse
 
mazonthemoon profile image
Mary Ronan

❀❀❀

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Great article! πŸ‘πŸ‘

Collapse
 
1link profile image
1Link.Fun

Very nice~ thanks!

Collapse
 
kurealnum profile image
Oscar

These are really cool, great job!

Collapse
 
afif profile image
Temani Afif

It's on Twitter (X) πŸ‘‡

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

#5 and #6 seem to be broken (at least in Firefox). Easily fixable

Collapse
 
afif profile image
Temani Afif

I am hiding the 5 and 6 on Firefox because they rely on the lh unit which is not yet supported. You should not be able to see them using Firefox unless you copied the code using chrome and you tried to see them using Firefox.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Perfectly visible on Firefox - I just went to the link.

Change the conical gradient value to 50.1% and they're fixed. Not sure if that breaks Chrome or not though

Thread Thread
 
afif profile image
Temani Afif

any value bigger than 50% should do the job and I suppose you are using Firefox nighty because the actual version of Firefox (119) doesn't support lh and the support will start at 120 (end of this month) so actually I don't care about half of the ribbon on Firefox until the release of 120. I will have a lot of bug to fix related to lh anyway.

Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Yup, I'm using Nightly (121)