I am attempting to construct a unique pyramid using CSS properties like clip-path. Despite successfully creating a triangle, my efforts to create trapezoids beneath it have not been as fruitful.
.container {
min-width: 50%;
max-width: 50%;
}
.triangle {
background-color: yellow;
clip-path: polygon(90% 100%, 50% 0%, 10% 100%);
}
.trapeze {
background-color: blue;
clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%);
}
div {
min-height: 200px;
max-height: 200px;
border-color: black;
border-style: solid;
}<div class="container">
<div class="triangle"></div>
</div>
<div class="container">
<dic class="trapeze"> </dic>
</div>Upon viewing the result :
https://i.sstatic.net/iSTjP.png
I am working without any framework and testing in Firefox version 67