move the slider already...
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...
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.