Linear Gradient - is this possible?

[Riley]

Hey everybody. I'm developing a new skin and want to feature a blurb up above the banner that I think will involve using the linear gradient function through CSS, though I'm not sure if that I have in mind is possible. Here's what I'm trying to obtain:

I keep getting a smooth gradient throughout which, fair, that's the purpose of linear gradient; but if anyone has any idea on how this might be attainable, I'm all ears! Otherwise no big deal, I can manufacture something in Photoshop to take the easy way out.

( I read up a bit on this before posting but nothing came of it, but I use a Firefox browser if it helps at all, and hope to find something that works for most commonly used browsers.)

[Kami]

🤔 Not super sure that a linear gradient is necessary? It's probably better if you do a parent div with however many child divs within it (for the # of sections you have) and then use CSS to transform & skew the appropriate edges.

EG:
-webkit-transform: skewX(
-20deg
);
   -ms-transform: skewX(-20deg);
   transform: skewX(
-20deg
);
   -webkit-transform-origin: bottom;
Does that get you where you wanna go?

[Riley]

Mar 31, 2021 12:28:48 GMT -8 Kami said:

🤔 Not super sure that a linear gradient is necessary? It's probably better if you do a parent div with however many child divs within it (for the # of sections you have) and then use CSS to transform & skew the appropriate edges.

EG:
-webkit-transform: skewX(
-20deg
);
   -ms-transform: skewX(-20deg);
   transform: skewX(
-20deg
);
   -webkit-transform-origin: bottom;
Does that get you where you wanna go?

Hey, you're right! This works! Thanks for pointing me in a better direction.

[Kami]

Yay, glad to help (: