ARTICLE AD BOX
I'm trying to create triangles with CSS then wrap text content within the triangles itself, so the triangle is the background and the text matches the triangle shape.
I've seen some examples online using the shape-outside property with a polygon, the same way I made the shape itself but I feel like I can't get the text to be a perfect triangle shape.
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%);
}
<div class="triangle">
<i></i>
<p>Random text content. Random text content. Random text content. </p>
</div>
3,04910 gold badges40 silver badges57 bronze badges
1
Update your code like below:
div.triangle {
width: 380px;
aspect-ratio: 1.5;
clip-path: polygon(0 0, 100% 0, 50% 100%);
background: black;
color: red;
margin: 30px auto 0;
font-size: 20px;
text-align: justify;
}
.triangle i,
.triangle:before {
content: '';
float: left;
height: 100%;
width: 50%;
shape-outside: polygon(0 0, 0 100%, 100% 100%);
}
.triangle i {
float: right;
shape-outside: polygon(100% 0, 0 100%, 100% 100%);
}
<div class="triangle">
<i></i>
<p>Random text content. Random text content. Random text content. Random text content. Random text content. Random text content. Random text content. </p>
</div>
280k30 gold badges380 silver badges506 bronze badges
The outer triangles have to be really 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; padding-right: 20px; } .triangle i, .triangle::before { content: ''; float: left; height:100%; width: 100%; shape-outside: polygon(0% 0%, 50% 50%, 0% 50%); } .triangle i { float: right; shape-outside: polygon(100% 0%, 100% 50%, 50% 50%); }
Explore related questions
See similar questions with these tags.
