CSS Tip

Folded Ribbon Shape with hover effect

Turn your title into a fancy Ribbon Shape 🎀

A folded ribbon shape

h1 {
  --r: 20px; /* control the cutout of the ribbon */
  --s: 20px; /* size of the folded part */
  --c: #d81a14;
  
  --d: 0px; /* This will control the animation part */
  line-height: 1.6; /* control the height */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: linear-gradient(#0000 40%,#0002) var(--c);
  clip-path: polygon(calc(1lh + var(--d)) 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,calc(1lh + var(--d)) 100%,calc(1lh + var(--d)) calc(100% + var(--s) + var(--d)),calc(.5lh + var(--d)) calc(100% + var(--s) + var(--r) + var(--d)),var(--d) calc(100% + var(--s) + var(--d)),var(--d) 100%);
  box-shadow:
    0 0 10px #000,
    0 0 0 999px var(--c);
  cursor: pointer;
  transition: .3s linear;
}

h1:hover {
  --d: .2lh; /* don't use a big value to not cut the text */
}

See the Pen CSS-only Ribbon with a nice hover effect by Temani Afif (@t_afif) on CodePen.

More Ribbon Shapes: css-generators.com/ribbon-shapes

More CSS Tips