"Striped" background color transition

Design help Layout & Design
1

Hi, i’m wondering how to do this type of background in webflow (and that it’ll still be responsive).

ENRJ Main_Test1_page-0001
ENRJ Main_Test1_page-00011920×5747 307 KB

1 Like
2

Hey @Jaz_N, have a look at this cloneable from Cedric Moore to help you create the slanted sections. Achieving a similar “color transition” is done by creating several sections and adding different background colors for each. Does this help you? Let me know.

3

Hey Julian,
I bet it would but I can’t see the custom code because the site isn’t paid.
Could you paste it here ?

Thank you

1 Like
4

I understand. Pasting the custom code would be of no help, as you need to include it in your project for it to work as well.

Alternatively, have a look at these two cloneables (Cloneable 1, Cloneable 2) from @Waldo and @rowan respectively. These should work without custom code.

5

Ok thank you its perfect !

1 Like
6

That‘s great to hear! Feel free to mark my answer as the solution. This helps others having the same question in the future. Thanks and good luck with your project.

1 Like
7

I can surely do it but but I can’t see the custom code because the site isn’t paid.
Could you paste it here

8

Hey @blogwriter08, here’s the custom code from the cloneable I mentioned:

<style>

.slanted-top-right {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  margin-bottom: -10vw;
}

.slanted-bottom-right {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - 10vw));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - 10vw));
  margin-bottom: -10vw;
   
}

</style>