After some trial and error, I finally found the solution to my shape-outside issue. It turns out that shape-outside needs to be a sibling, rather than a child, of the item it wants to affect. Following the advice from AH in the comments, I decided to rewrite the section as a grid. The Codepen has been updated for reference. Each element in the grid now acts as a placeholder, housing each triangle div. Within each triangle div, there is a shape-outline styled div along with a simple paragraph element containing the text. By playing around with the horizontal margins of the grid elements, I was able to make it work. While not the most elegant solution, it gets the job done.
Hello! I've been working on this tangram-like grid for a while now, but I'm struggling to get it to function properly. My goal is to have text wrapped inside each triangle element. I explored using shape-outside, but due to the use of display:flex in the parent div, the standard solutions did not seem to apply in my case. I am open to exploring grid-based alternatives or even a complete design overhaul if it simplifies the process.
This is how it functions: There are 6 rows, each containing 4 elements. Every even line is moved up by 100% to align with the previous odd line. The triangles are created with clip-path pointing in four possible directions. Any assistance or suggestions would be greatly appreciated!
#edu-grid {
height: 700px;
width: 90%;
}
.edu-row {
height: 33%;
width: 100%;
}
.edu-item {
height: 100%;
width: 25%;
border: 1px solid black;
}
.edu-top-left {
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.edu-top-right {
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.edu-bottom-right {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.edu-bottom-right-shape {
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
height: 100%;
width: 100%;
float: left;
margin: 0;
}
.edu-bottom-left {
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.edu-bocc {
background: blue;
}
.edu-blank {
background: black;
}
.edu-mcg {
background: red;
}
.edu-whu {
background: green;
}
.edu-upb {
background: yellow;
}
.edu-up {
margin-top: -231px;
}
.flex {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}<div id="edu-grid">
<div id="edu-1" class="flex edu-row">
<div class="edu-item edu-blank edu-top-left">a</div>
<div class="edu-item edu-bocc edu-top-left">a</div>
<div class="edu-item edu-blank edu-top-right">a</div>
<div class="edu-item edu-mcg edu-top-left">a</div>
</div>
<div id="edu-2" class="flex edu-row edu-up">
<div class="edu-item edu-bocc edu-bottom-right"></div>
<div class="edu-item edu-bocc edu-bottom-right"><div class="edu-bottom-right-shape"></div><div><p>a</p></div></div>
<div class="edu-item edu-bocc edu-bottom-left">a</div>
<div class="edu-item edu-mcg edu-bottom-right">lorem ipsum etc etch</div>
</div>
<div id="edu-3" class="flex edu-row">
<div class="edu-item edu-bocc edu-top-right"></div>
<div class="edu-item edu-bocc edu-top-right"></div>
<div class="edu-item edu-bocc edu-top-left"></div>
<div class="edu-item edu-mcg edu-top-right"></div>
</div>
<div id="edu-4" class="flex edu-row edu-up">
<div class="edu-item edu-blank edu-bottom-left"></div>
<div class="edu-item edu-bocc edu-bottom-left"></div>
<div class="edu-item edu-blank edu-bottom-right"></div>
<div class="edu-item edu-whu edu-bottom-left"></div>
</div>
<div id="edu-5" class="flex edu-row">
<div class="edu-item edu-upb edu-top-right"></div>
<div class="edu-item edu-upb edu-top-left"></div>
<div class="edu-item edu-whu edu-top-right"></div>
<div class="edu-item edu-whu edu-top-left"></div>
</div>
<div id="edu-6" class="flex edu-row edu-up">
<div class="edu-item edu-upb edu-bottom-left"></div>
<div class="edu-item edu-upb edu-bottom-right"></div>
<div class="edu-item edu-whu edu-bottom-left"></div>
<div class="edu-item edu-whu edu-bottom-right"></div>
</div>
</div>