Folded rectangle shapes using CSS mask
Create folded rectangle shapes with a subtle 3D effect
- Single element (no pseudo-element)
- Optimized with CSS Variables
- Powered by CSS mask
.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
- How to correctly use steps() with animations The default behavior of steps() is not intuitive so learn how to use it correctly.
- Vertical rounded tabs using CSS mask A few lines of code to get vertical rounded tabs using CSS mask.
- Select the last occurrence of an element in the whole document Select the last occurrence of any element in the whole document.
- Select the first occurrence of an element in the whole document Select the first occurrence of any element in the whole document.