CODEWITHSUNDEEP
htmlimagediagonal
Henrique Mota
Henrique Mota

Reputation: 144

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.

Upvotes: 0

Views: 775

Answers (2)

Faizan Khan
Faizan Khan

Reputation: 583

Try this easiest solution on the internet for making polygon shapes

You can use a CSS property clip_path to produce a shape of any type.

-webkit-clip-path: polygon(0 33%,100% 10%,100% 60%,0 85%); This line represents that we are drawing polygon which has four points and specifying the location of each point in terms of x and y. You can specify the position in terms of px, % or any unit terminology

CSS Code
#header{
background-color:green;
height:350px;
width:100%;
-webkit-clip-path: polygon(0 33%,100% 10%,100% 60%,0 85%);
}

And

HTML Code
<html>
<head>

</head>
<body>
<div id="header">

</div>
</body>
</html>

And check this link, where I've written the same code just to illustrate the clip-path functionality, to jsfiddle

For further and details Explanation check these links:

let me know if u didn't understand anything. I'll be more than happy to help you.

Upvotes: 5

Kuba Ch
Kuba Ch

Reputation: 125

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;

Upvotes: 0

Related Questions