CSS Tip

Folded rectangle shapes using CSS mask

Create folded rectangle shapes with a subtle 3D effect

CSS only folded rectangle shapes

.folded {
  --r: 30px; /* control the folded part */
  
  background: 
    linear-gradient(90deg,#0007,#0000 calc(var(--r)/2) calc(100% - var(--r)/2),#0007) 
    #88C425;
  border-radius: 0 0 var(--r) var(--r);
  --_m:0,#0000 100%,#000 calc(100% + 1px);
  mask:
    radial-gradient(var(--r) at 100% var(--_m)) no-repeat,
    radial-gradient(var(--r) at 0    var(--_m)) 100% 0 no-repeat,
    linear-gradient(#0000 var(--r),#000 0);
  mask-size: var(--r);
}

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

More CSS Shapes: css-shape.com

More CSS Tips