DEV Community

I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection 🎀

Temani Afif on November 13, 2023

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

Read full post

GrahamTheDev • Nov 13 '23 • 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]
}

Temani Afif • Nov 13 '23

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.

Mary Ronan • Nov 13 '23

❤❤❤

Temani Afif • Nov 13 '23

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.

CitronBrick • Nov 13 '23

Does it work on iOS Safari ?

Alvaro Montoro • Nov 13 '23

Great article! 👏👏

Oscar • Nov 13 '23

These are really cool, great job!

1Link.Fun • Nov 14 '23

Very nice~ thanks!

jagadeeshgade008 • Sep 24

awesome!!!

Temani Afif • Nov 13 '23

It's on Twitter (X) 👇

Jon Randy 🎖️ • Nov 13 '23 • Edited

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

Temani Afif • Nov 13 '23

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.

Jon Randy 🎖️ • Nov 13 '23

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

Temani Afif • Nov 13 '23

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.

Jon Randy 🎖️ • Nov 13 '23

Yup, I'm using Nightly (121)