.wp-site-blocks { position: relative; // This is needed so that the polygon is stretched across the whole site. .site-header:before { content: ""; background-color: var(--wp--custom--color--tertiary); position: absolute; bottom: 0; top: 0; left: 0; right: 0; z-index: -1; @include break-small-only() { clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw); } @include break-small() { clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw); } @include break-large() { clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw); } } }