CSS Tip

CSS-only folded ribbon

Create a cool Ribbon using one element and a few lines of code.

A CSS ribbon

.ribbon {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 10px; /* the top offset */
  
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px 0 calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #BD1550; /* the main color */
  border-bottom: var(--f) solid #0005;
}

See the Pen CSS only ribbon by Temani Afif (@t_afif) on CodePen.

More detail: www.freecodecamp.org/news/make-a-css-only-ribbon

More Ribbons #