Перенос текста в треугольник CSS ⇐ Html

[Anonymous]

Я пытаюсь создать треугольники с помощью CSS, а затем обернуть текстовое содержимое внутри самих треугольников, чтобы треугольник был фоном, а текст соответствовал форме треугольника.
Я видел в Интернете несколько примеров использования свойства shape-outside с многоугольником, точно так же, как я создавал саму фигуру, но чувствую, что не могу добиться того, чтобы текст имел идеальную треугольную форму.

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

div.triangle {
--s:450px;
height: var(--s);
width:  var(--s);
clip-path: polygon(0 0%, 100% 0%, 50% 50%);
background: black;
color: red;
margin: 30px auto 0;
font-size: 20px;
text-align: justify;
}

.triangle i,
.triangle::before {
content: '';
float: left;
height:100%;
width: 100%;
shape-outside:  polygon(0 0%, 100% 0%, 50% 50%);
}

.triangle i {
float: right;
shape-outside:  polygon(0 0%, 100% 0%, 50% 50%);
}

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

[i][/i]
Random text content. Random text content. Random text content.

Подробнее здесь: https://stackoverflow.com/questions/798 ... s-triangle