Search code examples
htmlimagediagonal

How to make diagonal divs like this?

I was searching for diagonal divs and I didn't find anything that can help me. I have this project to do and I need to do this.

This
And This

I want to do exactly like that but I only find posts with horizontal diagonal divs..

Thanks, regards.

Edit: The second image link its the continuation from above.

Solution

  • I don't know nothing about diagonal divs but u can try to cover parts of img's that you need with 

    .cover {
position: absolute;
top: -25px; /* or differenet position that fit on every section*/
left: 0;
z-index: 1;
width: 100vw;
height: 50px; /* or different height that you need*/
transform: rotate(-10deg); /* or different angle*/
background-color: white;
}
    <div class="cover"></div>
    And the same thing on bottom of section.

    Be sure to set overflow and position on every section:

    overflow: hidden;
position: relative;