编辑：我发现了问题：外部形状需要是它想要影响的项目的兄弟，而不是子。我决定将该部分重写为网格(如评论中所建议的，谢谢啊！(。Codepen会更新，以防有人好奇。网格的每个元素现在都是一个占位符，它包含每个三角形div。在每个三角形div中都有一个形状轮廓样式的div，以及一个带有文本的简单p元素。使用网格元素的水平边距是可行的。不是最优雅的，但这是一个解决方案。
嘿！我已经做了很长一段时间了，但似乎无法让它发挥作用。我正在尝试构建这个类似七巧板的网格，我想将文本包装在每个三角形中。我发现了一些在外部使用shape的解决方案，但由于我在父div中使用display:flex，我相信这并不完全适用于我的情况。如果这样做更容易的话，可以考虑基于网格的解决方案或完全不同的设计。
Codepen
它的工作原理：6行，每行4个元素，所有偶数线都向上移动了100%，与前一条奇数线处于同一水平，三角形通过指向四个可能方向中的每一个方向的剪辑路径实现。任何帮助都是非常受欢迎的！
#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>我刚刚看到您最近所做的编辑。
我有一个稍微不同的想法，所以在这里添加它以备使用。
整个事情是一个网格，这个片段没有引入灵活行的概念。
网格中的项目是使用网格列/网格行系统放置的，因此一个网格中可以有两个项目。每个都是俄罗斯方块类型的三角形。
如果某个地方没有三角形块(例如，网格的第一个单元格只有一块(，那么没有块放在那个位置，这样我们就可以看到网格的背景，而不是假装那里有块。
* {
margin: 0;
}
.container {
background-color: black;
height: 100vmin;
aspect-ratio: 4 / 3;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px;
--so0: polygon(0 0, 100% 0, 0 100%);
--so1: polygon(0 0, 100% 0, 100% 100%);
--so2: polygon(100% 0, 100% 100%, 0 100%);
--so3: polygon(100% 100%, 0 100%, 0 0);
position: relative;
font-size: 3vmin;
}
.container>* {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
color: white;
background-color: var(--bg);
clip-path: var(--cp);
overflow: hidden;
}
.container>*>*:first-child {
width: 100%;
height: 100%;
float: var(--fl);
shape-outside: var(--so);
z-index: -1;
}
.bottomright {
--so: var(--so0);
--fl: left;
--cp: var(--so2);
}
.topleft {
--so: var(--so2);
--fl: right;
--cp: var(--so0);
text-align: right;
}
.bottomleft {
--so: var(--so1);
--fl: right;
--cp: var(--so3);
text-align: right;
}
.topright {
--so: var(--so3);
--fl: left;
--cp: var(--so1);
}
.container>*>*:last-child {
padding: 5px;
}
.blue {
--bg: blue;
}
.red {
--bg: red;
}
.green {
--bg: green;
}
.yellow {
--bg: yellow;
color: black;
}
.row1 {
grid-row: 1;
}
.row2 {
grid-row: 2;
}
.row3 {
grid-row: 3;
}
.col1 {
grid-column: 1;
}
.col2 {
grid-column: 2;
}
.col3 {
grid-column: 3;
}
.col4 {
grid-column: 4;
}<div class="container">
<div class="blue row1 col1 bottomright">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue row1 col2 topleft">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue row1 col2 bottomright">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue row1 col3 bottomleft">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="red row1 col4 topleft">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="red row1 col4 bottomright">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topright blue col1 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue topleft row2 col2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright blue col2 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="blue topleft col3 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="green topleft col4 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright red col4 row2">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft yellow col1 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright yellow col1 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft yellow col2 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright yellow col2 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft green col3 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright green col3 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="topleft green col4 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>
<div class="bottomright green col4 row3">
<div></div>
<div>text text text text text text text text text text text text text text text text text text text </div>
</div>