Folded Ribbon Shape with hover effect II

September 26, 2023

Create a fancy ribbon shape with a few lines of code

Only one element
No pseudo-elements
Optimized with CSS variables
Nice animation on hover

A folded ribbon shape using CSS

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;
  color: #fff;
  background: var(--c);
  box-shadow: 0 0 0 999px color-mix(in srgb,var(--c),#000 35%);
  clip-path: polygon(var(--d) 0,var(--d) calc(0% - var(--s) - var(--r) - var(--d)),calc(.5lh + var(--d)) calc(0% - var(--s) - var(--d)),calc(1lh + var(--d)) calc(0% - var(--s) - var(--r) - var(--d)),calc(1lh + var(--d)) 0,calc(100% - 1lh - var(--d)) 0,calc(100% - var(--d)) 100%,calc(100% - var(--d)) calc(100% + var(--r) + var(--s) + var(--d)),calc(100% - .5lh - var(--d)) calc(100% + var(--r) + var(--d)),calc(100% - 1lh - var(--d)) calc(100% + var(--r) + var(--s) + var(--d)),calc(100% - 1lh - var(--d)) 100%,calc(1lh + var(--d)) 100%);
  transition: .3s linear;
}
h1:hover {
  --d: .2lh; /* don't use a big value to not cut the text */
}

See the Pen CSS-only folded ribbon (with hover effect) by Temani Afif (@t_afif) on CodePen.

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