Non Rectangular Layouts - html

Question

I want to create HTML layout like this
https://dribbble.com/shots/2136656-Minions-Promo/attachments/393961
I tried to use some css codes to make elements non rectangular, but no luck so far :).
I saw this post:
How can i Create This Non-Rectangular Layouts?
But couldn't find answers there :)
Anyone have an idea how to build this thing?
Thanks

Answer 1

You can use :pseudo element to add a background and use skew property
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.red {
padding: 15px;
position: relative;
color: white;
margin-bottom: 50px;
}
.red:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: tomato;
z-index: -1;
transform: skew(0deg, 2deg);
}
.blue {
position: relative;
padding: 15px;
}
.blue:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: cornflowerblue;
z-index: -1;
transform: skew(0deg, -2deg);
}
<div class="red">
<h1>Sed augue ipsum egestas</h1>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>
<p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>
<p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>
<div class="blue">
<h1>Sed augue ipsum egestas</h1>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>
<p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>
<p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.yellow {
margin: 80px 0;
padding: 15px;
background: yellow;
position: relative;
}
.yellow:before,
.yellow:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: yellow;
z-index: -1;
}
.yellow:before {
top: -40px;
transform: skew(0, 3deg);
}
.yellow:after {
bottom: -40px;
transform: skew(0, -3deg);
}
<div class="yellow">Fusce fermentum odio nec arcu. Nullam accumsan lorem in dui. Nullam accumsan lorem in dui. Cras varius. Morbi mollis tellus ac sapien. Cras dapibus. Fusce pharetra convallis urna. Fusce a quam. Maecenas ullamcorper, dui et placerat feugiat, eros pede
varius nisi, condimentum viverra felis nunc et lorem. Phasellus consectetuer vestibulum elit. Aliquam lobortis. Cras ultricies mi eu turpis hendrerit fringilla.</div>