Я пытаюсь создать пирамиду. Я решил использовать CSS clip-path
для этого. Я хотел сделать треугольник (что мне удалось сделать) и несколько трапеций под ним (даже первый не удался).
.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>
Наконец, вот результат:
Я не работаю с фреймворком и использую Firefox 67