A Ribbon shape with a reveal hover effect

November 29, 2023

Create a ribbon shape with a fancy reveal effect on hover

Only one element
No fixed size (it fits your text content)
Optimized with CSS Variables

CSS Ribbon shape with reveal effect

@property --s { 
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: true;
}

.ribbon {
  --r: .8em; /* control the cutout */
  --s: 15%; /* control how much content is shown initially */
  
  margin-block: .5em;
  padding-inline: calc(var(--r) + .3em) .5em;
  clip-path: polygon(0 0,var(--s) 0,var(--s) 100%,0 100%,0 calc(100% - .25em),var(--r) 50%,0 .25em) margin-box;
  translate: calc(100% - var(--s));
  background: #2699dc padding-box;
  position: relative;
  transition: --s .8s linear;
}
.ribbon:before {
  content: "";
  position: absolute;
  inset: -.5em calc(100% - var(--s)) -.5em 0;
  background: radial-gradient(.2em 50% at right,#000a,#0000);
}
.ribbon:hover {
  --s: 100%;
}

See the Pen Ribbon shapes with hover effect by Temani Afif (@t_afif) on CodePen.

We can easily get more variation using the same code structure

See the Pen Ribbon shapes with hover effect (more variation) by Temani Afif (@t_afif) on CodePen.