Skip to main content

Responsive full-screen slanted coloration

Use modern CSS to:

All of this, using only 3 properties and easy to control with CSS variables

max-width section with a full screen responsive slanted coloration

section {
--w: 800px; /* max-wdith */
--s: 2rem; /* control the slanted effect */
--c: pink;

margin: var(--s,0) max(1rem,50% - var(--w)/2);
border-image: fill 0//99vw conic-gradient(var(--c) 0 0);
--_s: clamp(0px,(100vw - var(--w))*999,var(--s)/2);
clip-path: margin-box
0 calc(var(--s)/2 + var(--_s)),
100% calc(var(--s)/2 - var(--_s)),
100% calc(100% - var(--s)/2 - var(--_s)),
0 calc(100% - var(--s)/2 + var(--_s))

Resize the screen to see the responsive part of the slant effect

See the Pen Slanted responsive coloration by Temani Afif (@t_afif) on CodePen.