can you create non-symmetrical shapes in css

Issue

I'm looking to create 4 different shapes with content areas that will work responsively. Heres an example image -

Is it possible to create 4 div containers like this without the use of svg? I understand you can create a triangle shape inside the container and position it absolute top right but then the following shape (float right) would need a higher z-index to appear ontop.

It all just sounds messy, could anyone advise?

Solution

There are various ways to achieve this effect.

One approach is:

• use transform: skew to change the angle of the right-hand divs
• use relative positioning to slide the right-hand divs to the left, so they overlap the left-hand divs
• use ::after pseudo-elements to hide the right-hand side of the right-hand divs

Working Example:

body {
width: 200vw;
overflow-x: hidden;
}

div {
float: left;
width: 400px;
height: 90px;
border-left: 3px solid rgb(255,255,255);
border-bottom: 3px solid rgb(255,255,255);
}

div:nth-of-type(3) {
clear: left;
}

div:nth-of-type(even) {
position: relative;
transform:skew(315deg);
}

div:nth-of-type(even)::after {
content: '';
display:block;
position: absolute;
top:0;
height:90px;
background-color:rgb(255,255,255);
transform:skew(-315deg);
}

div:nth-of-type(1) {
background-color:rgb(149,117,117);
}

div:nth-of-type(2) {
left: -67px;
background-color:rgb(117,149,117);
}

div:nth-of-type(3) {
background-color:rgb(117,133,149);
}

div:nth-of-type(4) {
left: -160px;
background-color:rgb(149,117,149);
}

div:nth-of-type(2)::after {
width:228px;
right:-60px;
}

div:nth-of-type(4)::after {
width:150px;
right:-75px;
}

div p {
height: 90px;
margin: 0;
padding: 0 24px;
line-height: 90px;
font-size: 33px;
color: rgb(255,255,255);
}

div:nth-of-type(even) p {
transform: skew(-315deg);
}

<div><p>one</p></div>
<div><p>two</p></div>
<div><p>three</p></div>
<div><p>four</p></div>

Answered By - Rounin - Standing with Ukraine