Responsive full-screen slanted coloration

Use modern CSS to:

• Set a max-width
• Center an element
• Set a minimum margin
• Add a full-width slanted coloration
• Make the slant effect responsive

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

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
    polygon(
      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.

• Previous CSS Tip
• Next CSS Tip