CSS Tip

Full screen slanted background

Add a slanted background to your container that extend to the edge of the screen.

A full screen slanted background

.slant {
  --a: 3deg; /* control the angle (yes it should be small) */
  
  border-image: conic-gradient(pink 0 0) fill 0//9999px;
  clip-path: 
    polygon(
      -9999px calc(tan(var(--a))*9999px),
      9999px calc(tan(var(--a))*-9999px),
      calc(100% + 9999px) calc(100% - tan(var(--a))*9999px),
      calc(100% - 9999px) calc(100% + tan(var(--a))*9999px)
    );
}

See the Pen CSS-only full screen slanted background by Temani Afif (@t_afif) on CodePen.

Related: smashingmagazine.com/2024/01/css-border-image-property/

More CSS Tips