Do you need to create a slanted div for your website? Well you’ve come to the right place!
We are going to create a slanted Div using CSS only without the use of images as this would be a waste of resources! We are going to use pseudo elements, applying a CSS3 transform on them, skewing the whole element and hiding the overlapping areas. Here is the code:-
HTML
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Silva Web Designs</h1>
<p>Okay, so I guess this is a good way to make a slanted div aye? I am also responsive which is pretty cool. Instead of using a background colour you can use a background image instead which works very nicely. The possibilities are endless! :)</p>
</section>
</div>
</main>
</div>
CSS
.container {
padding-top: 60px;
}
.main-container {
background: #169fe6;
position: relative;
color: #FFFFFF;
}
.main-container:before {
content: '';
position: absolute;
left: 0;
top: -36px;
width: 100%;
height: 72px;
background: #169fe6;
-webkit-transform: skewY(2.5deg);
-moz-transform: skewY(2.5deg);
-ms-transform: skewY(2.5deg);
-o-transform: skewY(2.5deg);
transform: skewY(2.5deg);
-webkit-backface-visibility: hidden;
}
section {
margin: 10px 0;
padding: 0 20px;
padding-bottom: 10px;
position: relative;
}
And there you have it, I hope this helps! π