CSS trapezoids and triangle stack food pyramid - html

Question

I am currently trying to make a basic Food pyramid with six levels, The bottom 5 layers/levels will use trapezoids and the top level will be a triangle to make up a pyramid shape.
I currently can display 2 trapezoids and one triangle but after that any sizing that I use looks extremely strange and skewed, Please see the image below for what I am trying to achieve:
Css Food pyramid
Here is my current CSS code
body {
background-color: #EFEFEF;
}
.shape {
margin: auto;
}
.one {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 60px solid #EA1B07;
}
.one:hover {
border-bottom: 60px solid #EA1B07;
}
.two {
border-bottom: 75px solid #F4B600;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
width: 100px;
}
.two:hover {
border-bottom: 75px solid #F4B600;
}
.three {
border-bottom: 100px solid #F9E029;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
height: 0;
width: 1px;
}
.three:hover {
border-bottom: 100px solid #F9E029;
}
.four {
border-bottom: 100px solid #049DFC;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
height: 0;
width: 60px;
margin: auto;
}
.four:hover {
border-bottom: 100px solid #049DFC;
}
.five {
border-bottom: 100px solid #A77643;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
height: 0;
width: 220px;
margin: auto;
}
.five:hover {
border-bottom: 100px solid #A77643;
}
.six {
border-bottom: 100px solid #5CD533;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
height: 0;
width: 380px;
margin: auto;
}
.six:hover {
border-bottom: 100px solid #5CD533;
}
As you can see the top three layers aren't connected properly.
Also, the fifth orange/gold (#F4B600) layer need to have some padding above and below it like the above image.
Any help with this would be appreciated.

Answer 1

Instead of trying to style each shape individually you could put all 6 elements in a container which is then shaped using CSS clip-path as that shape is simply a triangle.
Here's a basic snippet which results in:
.pyramid {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
width: 100vmin;
aspect-ratio: 2 / 1;
background-color: gray;
display: grid;
grid-template-columns: 1fr;
gap: 1vmin;
}
.pyramid > * {
background: pink;
}
.one {
background-color: #EA1B07;
}
.two {
background-color: #F4B600;
}
.three {
background-color: #F9E029
}
.four {
background-color: #049DFC
}
.five {
background-color: #A77643;
}
.six {
background-color: #5CD533;
}
<div class="pyramid">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
Obviously you'll want to decide on exactly the aspect ratios and gaps to suit your needs.