Text innerhalb eines CSS-Dreiecks umbrechen ⇐ HTML

[Anonymous]

Ich versuche, Dreiecke mit CSS zu erstellen und dann den Textinhalt in die Dreiecke selbst einzubinden, sodass das Dreieck der Hintergrund ist und der Text mit der Dreiecksform übereinstimmt.
Ich habe online einige Beispiele gesehen, in denen die Eigenschaft „shape-outside“ mit einem Polygon verwendet wurde, genauso wie ich die Form selbst erstellt habe, aber ich habe das Gefühl, dass ich den Text nicht in die perfekte Dreiecksform bringen kann.

Code: Select all

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%);
}

Code: Select all

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