Пирамида с текстом в HTML/CSS ⇐ Html

[Anonymous]

Я уже проверил вопрос:
CSS Trapezoids и Triangle Stack Pood Pyramid < /p>
Похоже, что с таким подходом, если я использую текст, он показывает вверх И мне пришлось использовать текстовое значение: Центр < /code>, так как левый выравнивание по умолчанию обрезается. < /P>


.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;
color: white;
text-align: center;
}

.one {
background-color: #EA1B07;
}

.two {
background-color: #F4B600;
}

.three {
background-color: #F9E029
}

.four {
background-color: #049DFC
}

.five {
background-color: #A77643;
}

.six {
background-color: #5CD533;
}< /code>

Код: Выделить всё

Hello
World
Foo
Bar
Baz
Qux

Кстати, он отображается в Chrome (который отличается от фрагмента выше):


Подробнее здесь: https://stackoverflow.com/questions/796 ... n-html-css