Search code examples
htmlcssresponsive-design

How to do an inclined shape that is responsive?

I wanted to create a responsive site with an inclined background in order to have a transition between two backgrounds. i'am using three differents sections and the second has a rotation angle to create the inclined transition. But when i'm resizing the window we can see the "bad" part of the section 2.
not resized window: resized window where we can see on the right the "bad" part of the section 2

Is there a way to make this responsive ?

.sec1 {
    height: 50vh;
    background-color: blue;
}

.sec2 {
    height: 20vh;
    width: 91.5%;
    background-color: red;
    transform: rotate(-4deg) scale(1.2, 1);
    margin: -4vw 0px -4vw 0px;  
}

.sec3 {
    height: 50vh;
    background-color: red;
}
    <section class ="sec1">
    </section>

    
    <section class = "sec2">
    </section>
        
    <section class = "sec3">
    </section>

I tried to hide "overflow-x", it did not change while resizing the window.

Solution

  • I have an online generator for such shapes: https://css-generators.com/section-divider/

    You can define a gap but make it 0 if you don't want.

    /* from the generator */
.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 57px),0 100%);
}
.bottom {
  clip-path: polygon(0 57px,100% 0,100% 100%,0 100%);
  margin-top: -47px;
}
/**/

section {
  min-height: 200px;
  background: blue;
}
section + section {
  background: red;
}
    <section class="top"></section>
<section class="bottom"></section>