Flex布局三角形内文字环绕问题及Grid改造解决方案

编辑补充：我已找到问题所在：shape-outside需要作为目标元素的同级元素，而非子元素。我按照评论建议改用Grid布局重写了该部分（感谢AH！），已更新Codepen供感兴趣的人查看。现在网格的每个元素都是占位容器，内部包含三角形div，三角形div内有设置shape-outline样式的div和承载文字的p元素，调整网格元素的水平边距后可正常生效，虽不够优雅但可行。

我在这个需求上花费了不少时间，但始终无法实现。我想要构建一个类似七巧板的网格，让文字能环绕在每个三角形内部。我了解到可以用shape-outside实现，但由于父级div使用了display:flex，该方案似乎不适用于我的场景。我也考虑采用Grid布局或其他设计方案，只要能简化实现即可。

实现逻辑 #

• 共6行，每行4个元素
• 所有偶数行向上偏移100%，使其与前一个奇数行处于同一水平位置
• 通过clip-path实现指向四个不同方向的三角形

CSS代码 #

#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 */
}

HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者Marco