tl;dr

move the slider already...

A few example ribbons

Depending on the position inside their respective parent container, all ribbons pivot around one of its own corners.

8
8
8
8
7
8 lvl 3
8 lvl 3
8 lvl 3
8 lvl 3
7 lvl 2
8
8
8
8
7
8
8
8
8
7

use 'overflow: hidden' to clip the ribbons.
or just don't, like in this container...

ribbon i is an icon ribbon
ribbon d is a circular ribbon with some text
ribbon 0 is supposed to look like some sticky tape
ribbons 1-5 are regular rectangular html elements
ribbon 6 is nested with ribbons 7>8>9
(need to zoom in the browser a lot to see all of them)

And yes, I noticed the mess when the slider is moved...

l;bra

linear equation: y=mx+b

All slanted ribbons on this page use the
'slope intercept form' of linear equation: y=mx+b
using points p1(x1,y1) and p2(x2,y2):

y = (y1 * unit) + (y2 - y1) / (x2 - x1) * (x - x1 * unit)

y is the size value we need for a CSS property
x is always either 100vh, 100vw, 100vmin or 100vmax
x1,y1 mobile viewport width, small size selection
x2,y2 desktop viewport width, large size selection

unit to convert the final result to a CSS unit
(CSS calc() will fail without a proper unit conversion)

Root font-size and main page padding use the same equation,
no @media query are being used.

You can find an extensive explanation in the CSS.