A folded ribbon to the corner

May 12, 2023

Add a folded ribbon to the corner of your container using a few lines of code

One element (no pseudo-element)
No fixed width/height (fit content size)
No magic positioning numbers
Easy switch between both positions

A CSS folded ribbon

.ribbon {
  --f: 15px; /* control the folded part */
  
  position: absolute;
  top: 0;
  background: #45ADA8; /* the main color  */
  border-bottom :var(--f) solid #0007;
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}
.right {
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}
.left {
  left: 0;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

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

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