Skip to main content

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;
-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)

I know the code is scary but I will soon have an article to detail such techniques

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